无法在IE中将输入字段设置为只读

Question

我有一个简单的输入框：

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

还有一些 JQuery 代码：

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

这里的e.currentTarget指的是IE11中所命名的[object HTMLInputElement]。

我只是想将此输入字段设置为只读。在Chrome中，该代码可以工作，但在IE中不行。 我已经尝试过：

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

但是它们在IE11中都无法工作（在chrome中它们都可以工作）。

- szpic

---

你尝试过使用 .attr('readOnly', true); 吗？ - jrenk

如果 prop 不起作用，那么 attr 也不会起作用。 - T.J. Crowder

它运行良好。在IE中，输入变为只读。(我使用$（'input'）作为选择器)。 - MrUpsidown

@MrUpsidown：看起来不同之处在于所讨论的字段是否具有焦点。 - T.J. Crowder

@T.J.Crowder 我没明白。你的意思是说在IE中该字段仍然可以聚焦吗？ - MrUpsidown

@MrUpsidown：请查看我的回答。 - T.J. Crowder

Answer 1

好的，这很奇怪：如果在聚焦时将字段设为只读状态，IE11似乎会有些问题，其中一种问题是让您在光标存在的情况下继续修改该字段 - 使用某些按键，而不是其他按键。这里有一个例子：JSFiddle链接

$("#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);
}

在设置 readOnly 之前添加此行代码可以解决问题（演示）：

$(e.currentTarget).blur();

侧记：您不需要使用jQuery来设置readOnly属性，只需使用以下代码：

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

- T.J. Crowder

---

谢谢。但是它在Chrome中给我抛出了严重的Angular错误 ;) 但这是另一个问题的话题。 - szpic

Answer 2

在IE 8、9、10或11中，“只读”输入元素的工作不稳定。

在这种情况下，我们可以在输入元素中使用onkeydown="javascript: return false;"。

- Verinder Singh Nirvana

Answer 3

我在jQuery中使用了Focusin()函数，并结合ID使用。当我点击文本框时，我们会移除readonly属性，如下所示：

HTML:

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

Jquery：

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

});

注意：它将在IE11和其他浏览器中工作。

- Navdeep Kapil