javascript - IE11 不想关注 `disabled` 元素

Question

我试图强制文本只能在两个文本字段之一中输入。

当一个字段失去焦点时，我检查它的值，如果它不为空，我禁用另一个文本字段。

这是一个例子:

HTML:

<div class="container">
  <label for="textOne">textOne</label>
  <input type="text" id="textOne"/>
</div>
<div class="conatiner">
  <label for="textTwo">textTwo</label>
  <input type="text" id="textTwo"/>
</div>

jQuery:

$("#textOne").on('focusout', function() {
  console.log("focusout::\t"+this.id);
  if( $("#textOne").val() == "") {
    $("#textTwo").prop('disabled', false);
  } else {
    $("#textTwo").prop('disabled', true);
  }
});

$("#textTwo").on('focusout', function() {
  console.log("focusout::\t"+this.id);
  if( $("#textTwo").val() == "") {
    $("#textOne").prop('disabled', false);
  } else {
    $("#textOne").prop('disabled', true);
  }
});

这在 Chrome 和 Firefox 中工作得很好，但似乎 IE11 不支持 focus disabled 元素。

我找到的唯一解决方案是 this question , 即使用 readonly 属性，而不是 disabled 属性。这不是我的应用程序理想的解决方案。

有没有办法在 IE11 中实现这一点，同时仍然使用 disabled 属性？

IE11 不支持 focus disabled 属性的原因是什么？

提前感谢您的任何建议和回答。

编辑:这是一个关于 jsFiddle 的示例，当它在 IE11 上运行时将重现帖子中解释的问题 https://jsfiddle.net/ftqbop7a/2/

Answer 1

就这么简单，而不是 focusout 使用 input 事件:

$("#textOne").on('input', function() {
    if( $.trim($("this").val()) == "") {
    $("#textTwo").prop('disabled', false);
  } else {
    $("#textTwo").prop('disabled', true);
  }
});

$("#textTwo").on('input', function() {
    if( $("#textTwo").val() == "") {
    $("#textOne").prop('disabled', false);
  } else {
    $("#textOne").prop('disabled', true);
  }
});

jsFiddle

解释一下:在 focusout 上，IE 无法获取最后操作的输入元素的引用，而 (on)input 事件会，因为它会立即发生。

---

想要简化您的代码并让您的老板赞叹不已？
jsFiddle

var $inp = $("#textOne, #textTwo");
$inp.on("input", function() {
   $inp.not(this).prop("disabled", $.trim(this.value));
});