Can't change text after set readOnly=false IE

Question

I have this sample code, and It's not working just in IE. Is there an IE bug?

<input type="text" readonly="true" onclick="setReadonlyfalse(this)" />

<script type="text/javascript">
    function setReadonlyfalse(ed){
        ed.readOnly = false;
    }
</script>

I'm simulating a situation that after my grid show an editor, I receive a response from server to set my editor to readonly=false. (it was rendered with readonly=true)

edit:

I'm using ExtJS 3.4, and the code do this:

/**
 * Sets the read only state of this field.
 * @param {Boolean} readOnly Whether the field should be read only.
 */
setReadOnly : function(readOnly){
    if(this.rendered){
        this.el.dom.readOnly = readOnly;
    }
    this.readOnly = readOnly;
}

edit2: I'm adjusted the code to be more correct

<input type="text" readonly="readonly" onclick="removeReadonly(this)" value="hehehe" />
<script type="text/javascript">
    function removeReadonly(ed){
        ed.removeAttribute("readonly");
    }
</script>

If this editor lost focus and receive focus again, It'll work... — patricK, Aug 22 '14 at 22:47
You need to remove attribute instead of set it falase. Check this link: http://stackoverflow.com/questions/16298281/set-readonly-property-to-false-for-an-html-text-input-on-clicking-an-anchor-tag — Omidam81, Aug 22 '14 at 22:51
I'm using ExtJS, and they code set to false. But if is right to remove instead of set to false, I'll do an workarround. Thank you — patricK, Aug 22 '14 at 22:55
@Omidam81 Note that the answers to that question just show the jQuery way (`.prop()`) of doing `ed.readOnly = false;`. — Jonathan Lonowski, Aug 22 '14 at 22:57
This is pure javascript way: http://www.w3schools.com/jsref/met_element_removeattribute.asp — Omidam81, Aug 22 '14 at 23:00
`readonly` is a boolean attribute -- in your HTML, you can either use `readonly="readonly"` or `readonly`, but not `readonly="true"`. The [w3 validator](http://validator.w3.org/) says "Bad value true for attribute readonly on element input." — rvighne, Aug 22 '14 at 23:06
I'm changed to use removeAttribute("readOnly") insteadof set to false and nothing different happens — patricK, Aug 22 '14 at 23:07

score 0 · Answer 1 · answered Aug 22 '14 at 23:11

0

Remove the readonly attribute from the element programmatically, then set readOnly to false.

ed.removeAttribute('readonly'); // only needed the first time
ed.readOnly = false;

Yes, this is an IE bug.

answered Aug 22 '14 at 23:11

rvighne

20,755
11
51
73

Do you know if there is a bug open or somewhere described it? I searched and did not find. – patricK Aug 22 '14 at 23:19
@patricK: Since `readOnly` works in all other browsers and according to the standard, I conclude that IE is wrong. But I don't have *evidence* per se. Did this work? – rvighne Aug 22 '14 at 23:37
Unfortunately nothing has changed in the case of IE, but I considered it a bug and decided to fix on the serverside (not set readonly in this case) Thank you – patricK Aug 27 '14 at 14:46

Can't change text after set readOnly=false IE

1 Answers1