szpic szpic - 2 years ago 93
Javascript Question

Can not set readonly on input field in IE

I have a simple input field:

<input id="myInput" class="someClass"></input>

and some JQuery code:

$(e.currentTarget).prop('readonly', true);

is that
[object HTMLInputElement]
as IE11 names it.

I'm only trying to set this input field to be readonly. In chrome that code works but in IE not.
I tried already:

.prop('readonly', '');
.attr('readonly', true);

but none of them works in IE11 ( in chrome everyone of them works)

Answer Source

Okay, this is bizarre: If you make the field read-only while it has focus, IE11 seems to go a bit bonkers, and one of the ways it goes bonkers is to let you keep modifying the field while the cursor is there — with some keystrokes, but not others. Here's an example: Fiddle

$("#myInput").one("click", function(e) {
    $(e.currentTarget).prop('readonly', true);
    display("e.currentTarget.readOnly: " + e.currentTarget.readOnly);
$("#myInput").on("keydown", function(e) {
    display("e.currentTarget.readOnly: " + e.currentTarget.readOnly);
function display(msg) {

Adding this line before setting readOnly fixes it (fiddle):


Side note: You don't need jQuery to set the readOnly property, just:

e.currentTarget.readOnly = true; // Note the capital O
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download