javascript - IE，从打开的下拉列表中跳出胜过 knockoutjs 中的可见绑定(bind)

Question

在 IE11 中，如果您在专注于打开 时点击 Tab <select>下拉菜单，下拉菜单将关闭，焦点将向前移动到选项卡索引中的下一个控件。这与 Chrome 不同，在 Chrome 中，相同的操作只会关闭下拉菜单并需要您再次点击 Tab 键才能前进。

我的麻烦是当下一个控件被 knockoutjs“可见”数据绑定(bind)显示时。 IE 跳过新显示的控件并转到下一个!

<select data-bind="value: dDown">
    <option></option>
    <option>Fred</option>
    <option>Barney</option>
    <option>None</option>
</select>

<select data-bind="visible: dDown">
    <option>Can</option>
    <option>You</option>
    <option>Dig</option>
</select>   

Land here: <input type="text" />

我的 knockout 是这样的:

var viewModel = function() {
    this.dDown = ko.observable(false);
};
ko.applyBindings(new viewModel());

我已经能够用 e.keyCode == 9 进行暴力破解了, e.preventDefault()我所有 html 控件元素上的处理程序类型。很难看。想知道是否有办法增强可见的 knockout 结合？甚至更改选项卡行为的 IE 设置？

非常感谢任何帮助，

Answer 1

ok 改变了我的答案。我能让它工作的唯一方法是延迟设置焦点。所以我创建了一个延迟焦点的可写可观察对象。运行下面的代码片段。似乎对我有用，我没有 ie11，但我使用了模拟器。

function vm() {
  var self = this;
  this.records = ko.observableArray();
  this.availableNames = ko.observableArray(['Fred', 'Barney']);
  this.availableOptions = ko.observableArray(['Can', 'You', 'Dig']);
  this.selectedName = ko.observable('');
  this.selectHasFocus = ko.observable(false);
  this.dDown = ko.observable(false);
  
  this.selectedNameComputed = ko.pureComputed({
        read: function () {
            return self.selectedName();
        },
        write: function (value) {
            this.selectedName(value);
            if (self.selectedName()){
             self.dDown(true);
             self.selectHasFocus(true) 
             setTimeout(function() { document.getElementById('myselect').focus(); }, 10);
            }else{
              self.dDown(false);
            }
            
        },
        owner: this
    });

}

var myViewModel = new vm();

$(document).ready(function() {
  ko.applyBindings(myViewModel);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  input1: <input/>
</p>

<select data-bind="options: availableNames,
optionsCaption: 'None', value: selectedNameComputed">
</select>

<select data-bind="options: availableOptions, visible: dDown, hasFocus: selectHasFocus " id="myselect">

</select>
</p>
<p>
  input2: <input>
</p>