Menu
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>
522
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
