IE、開いているドロップダウンのタブがノックアウトの目に見えるバインド

Question

オープン<select>ドロップダウンにフォーカスしているときにタブを押すと、ドロップダウンが閉じてフォーカスが次のコントロールに移動します。タブインデックス。これはChromeとは異なり、同じ操作でプルダウンが閉じ、タブをもう一度押して進む必要があります。

私の問題は、knockoutjs "visible"データバインドによって次のコントロールが明らかになった場合です。 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" /> 

私のノックアウトはそうのようなものです：私は私のHTMLコントロール要素のすべてのハンドラのe.keyCode == 9、e.preventDefault()タイプで力をブルートすることができました

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

。かなり醜い。目に見えるノックアウトバインディングを強化する方法があるのだろうか？またはタブの動作を変更する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>