IE，打開下拉的tab鍵切換出勝過可見knockoutjs

Question

在IE11結合，如果你打標籤，當你專注於一個開放<select>下拉菜單，下拉菜單將關閉，焦點將向前移動到下一個控制的標籤索引。這與Chrome不同，在Chrome中，相同的操作只會關閉下拉菜單，並要求您再次點擊Tab才能前進。

我的麻煩是在knockoutjs「可見」數據綁定顯示下一個控件時。 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

確定更改我的答案。唯一能讓它工作的方式是延遲設定焦點。所以我創建了一個延遲焦點的可寫可觀察項。運行下面的代碼段。似乎爲我工作我沒有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>