Can not set readonly on input field in IE

Question

I have a simple input field:

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

and some JQuery code:

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

where e.currentTargetis 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','readonly');
.prop('readonly', '');
.attr('readonly', true);

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

Answer 1

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) {
    $("<p>").html(String(msg)).appendTo(document.body);
}

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

$(e.currentTarget).blur();

---

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

e.currentTarget.readOnly = true; // Note the capital O