IE11 不想关注“已禁用”元素

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 似乎不支持 disabled 元素上的 focus。

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

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

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

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

编辑： 这里有一个关于 jsFiddle 的例子，当运行在 IE11 上时会重现 post 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));
});

IE11 不想关注“已禁用”元素

IE11 doesn't want to focus on `disabled` element

html

javascript

jquery

internet-explorer-11