Menu
I have an HTML input field that I want the user to be able to see, but not edit. If I mark the field as 'disabled', it doesn't get submitted along with the rest of the form. If I mark it as 'readonly', it behaves like what I want, but still looks enabled (at least on Chrome).
Basically, I want the input field to look like a disabled field, but behave as a readonly field. Is this possible?
Thanks.
edit: Also, if I mark it as 'readonly', it's still possible to change its value by double clicking it, and selecting something that was previously there.
745
The readonly attribute makes a form control non-editable (or “read only”). A read-only field can't be modified, but, unlike disabled , you can tab into it, highlight it, and copy its contents. Setting the value to null does not remove the effects of the attribute. Instead use removeAttribute('readonly') .
The readonly attribute is a boolean attribute. When present, it specifies that an input field is read-only. A read-only input field cannot be modified (however, a user can tab to it, highlight it, and copy the text from it).
Solutions with the CSS pointer-events property The second way of making the input text non-editable is using the CSS pointer-events property set to "none", which will stop the pointer-events.
Here is workaround: You have input disabled where you want ( just for displaying value ) and have a hidden input with name and value you need.
187
You could use css to make it look however you want, although this may not match other disabled fields cross browser/platform.
<input type="text" value="Sample text" readonly="readonly" style="color: #787878;"/>
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
