Enable text selection on disabled inputs

Question

I have a large form with many input elements which need to be non-editable until a user clicks a button, but need to allow text selection for copying values to other forms.

My existing solution was to wrap the inputs in a disabled fieldset, which worked until the most recent Chrome release which doesn't allow text selection on disabled inputs.

Other questions here have had the readonly attribute suggested, but it isn't supported for fieldsets, so it doesn't cascade to child elements (see code snippet).

Any suggestions, or will I be stuck adding readonly to every input element? I'm also using AngularJS, so if there is an angular solution that may work as well.

EDIT: I should note that I've considered using ngReadonly (currently using ngDisabled on the fieldset) but ngReadonly doesn't work on fieldsets, and would have to be added to several hundred inputs across my application.



<html>
<body>
  <fieldset disabled>
    <input value="I am disabled by my parent" />
  </fieldset>

  <fieldset readonly>
    <input value="I am readonly" readonly/>
    <input value="I am not readonly, despite my parent" />
  </fieldset>
</body>
</html>

and if you create a policy that covers all children of the element and added the readonly property — Carlos Laspina
– Carlos Laspina, Commented Nov 1, 2016 at 14:30

Mackan · Accepted Answer · 2016-11-01 14:28:28Z

1

Perhaps something like this would suffice..

This might not be very angular-thinking, but it will allow you to keep the existing structure.

angular.element(document.querySelectorAll("fieldset[readonly]")).children('input').attr('readonly','readonly');

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<html>
<body>
  <fieldset disabled>
    <input value="I am disabled by my parent" />
  </fieldset>

  <fieldset readonly>
    <input value="I am readonly" readonly/>
    <input value="I am not readonly, despite my parent" />
  </fieldset>
</body>
</html>

answered Nov 1, 2016 at 14:28

Mackan

6,2712 gold badges29 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FDavidov · Accepted Answer · 2016-11-01 14:11:47Z

0

Since you are using AngularJS, you could think of something like this:

<html>
<body>
  <fieldset disabled>
    <input value="I am disabled by my parent" />
  </fieldset>

  <fieldset>
    <input value="I am readonly" {{Shold_Be_Readonly_or_Not}}/>
    ...
  </fieldset>
</body>
</html>

and within the controller, set $scope.Shold_Be_Readonly_or_Not as either readonly or an empty string.

answered Nov 1, 2016 at 14:11

FDavidov

3,7556 gold badges27 silver badges72 bronze badges

2 Comments

Adam Axtmann Over a year ago

Angular has ngReadonly which essentially does this. I'd like to avoid having to us it though, since that would need to be added to several hundred inputs across my application.

FDavidov Over a year ago

@AdamAxtmann, of course, I forgot about ngReadonly. Whatever solution you find, it will anyway require you to (at least) visit all your several hundreds input fields (either just to check the logic is OK or to do some small changes).

Collectives™ on Stack Overflow

Enable text selection on disabled inputs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related