Is it possible to set "readonly" attribute of an input to keep it editable?

I'm doing a crossword and I can change my function to search for/select a tag using different attribute but I'm still wondering if it is possible.

Thanks for help in advance!

Is it possible to set "readonly" attribute of an input to keep it editable?

I'm doing a crossword and I can change my function to search for/select a tag using different attribute but I'm still wondering if it is possible.

Thanks for help in advance!

• javascript
• jquery
• html

• 3 Huh? You want to make something readonly to make it editable? This doesn't make sense. – PeeHaa Commented Jun 13, 2012 at 8:44
• if i get you right you could use some additional class to mark fields which are not empty. or take a look at html5demos./contenteditable property – shershen Commented Jun 13, 2012 at 8:49

3 Answers 3

If the JavaScript readOnly property is set to true (a boolean, not a string), then the control will not be editable.

If the JavaScript readOnly property is set to false (a boolean, not a string), then the control will be editable.

If the HTML readonly attribute is present, then the readOnly property will default to true.

If the HTML readonly attribute is not present, then the readOnly property will default to false.

JavaScript can modify the value property of a control no matter what state the readOnly property has.

There is no way for a control to be edited through the normal browser UI if it is set to readOnly (JavaScript consoles and DOM inspectors are not the normal UI).

The attribute readonly renders the input control noneditable for a user. Using javascript you can still change its value. Setting the readonly attribute in javascript to false has no effect for the user, the input still will be readonly. Removing the attribute will render the input editable for the user again.

You could also use the disabled attribute, with two differences: the field is displayed grayed out, and you can set the disabled attribute directly.

It's all tested/demonstrated in this jsfiddle [note: updated]

I suggest using the html5 supported data- prefix data-readonly="true" https://developer.mozilla/en-US/docs/Web/Guide/HTML/Using_data_attributes