Question

在IE11中，如果您在专注于打开 <select>下拉菜单时点按标签，则下拉菜单将关闭，焦点将向前移至标签中的下一个控件指数。这与Chrome不同，其中相同的操作只会关闭下拉菜单，并且需要再次点击标签才能前进。

我遇到的麻烦就是当下一个控件被knockoutjs＆＃34;可见＆＃34;数据绑定。 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" />

我的淘汰赛就是这样：

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

我已经能够在所有html控制元素上使用e.keyCode == 9，e.preventDefault()类型的处理程序来强制执行。蛮丑的。想知道是否有办法增强可见的敲除绑定？甚至是改变标签行为的IE设置？

非常感谢任何帮助，

Answer 1

确定改变了我的回答。我能让它发挥作用的唯一方法就是延迟设定焦点。所以我创建了一个可写的observable来延迟焦点。运行下面的代码段。似乎对我有用我没有ie11但是我使用了模拟器。

＆＃13;

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);
});

＆＃13;

<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>

＆＃13;

IE，从开放下拉列表中跳出来胜过在knockoutjs中的可见绑定

1 个答案: