无法在 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.currentTarget 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','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

Answer 2

'Read-only' input element doesn't work consistently in IE 8,9, 10 or 11.

In this case, we can use onkeydown="javascript: return false;" in the input element.

Answer 3

I have used Focusin() function in jquery side with Id. When I click on textbox then we remove readony attribute as below:

HTML:

<input type="text" id="txtCustomerSearch" readonly class="customer-search" 
   placeholder="Search customer:" maxlength="100" autocomplete="off">

Jquery:

$("#txtCustomerSearch").focusin(function () {
    $(this).removeAttr('readonly');

});

Note: it will working in IE11 and other browser.