IE, 열려있는 드롭 다운의 탭이 knockoutjs의 보이는 바인딩보다 우선 함

Question

열기<select> 드롭 다운에 집중할 때 탭을 누르면 IE7에서 드롭 다운이 닫히고 포커스가 다음 컨트롤로 이동합니다. 탭 인덱스. 이는 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

입니다. 내 대답이 변경되었습니다. 내가 일할 수있는 유일한 방법은 초점을 잡는 데 지체했다. 그래서 필자는 포커스를 지연시키는 쓰기 가능한 관찰 가능을 만들었다. 아래 스 니펫을 실행하십시오. 나를 위해 작동하는 것처럼 보였습니다. 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>