在Internet Explorer中的onchange處理程序中更改tabindex時的奇怪行為

Question

給出以下代碼：

<html>
<head>
<script>
  function updateTabIndex() {
    setTimeout(function() {
      var elem = document.getElementById("id1")
      elem.setAttribute("tabIndex", 2)
      elem.setAttribute("value", "now: tabindex 2")
    }, 100)
  }
</script>
</head>
<body>
  <h1>Weird Behaviour When Changing the tabindex in onchange Handler in Internet
    Explorer</h1>
  <p><input id="id1" tabindex="-1" value="tabindex: (-1)"/></p>
  <p><select tabindex="1" size="1" onchange="updateTabIndex()" onpropertychange="updateTabIndex()">
    <option>tabindex 1 - an option</option>
    <option>tabindex 1 - another option</option>
  </select></p>
  <p><input tabIndex="3" value="tabindex 3"/></p>


  <h2>Instructions</h2>
  <ol>
    <li>Open this page in IE. To be precise, the problem is reproducible in 
    (at least):
    <ul>
      <li>IE 8, Version 8.0.6001.18702CO on Windows XP and</li>
      <li>IE 9, Version 9.0.8112.16421 on Windows 7 Professional, 64 bit</li>
    </ul>
    <li>Use the <em>mouse</em> to change the value of the select box.</li>
    <li>As you can see, the onchange handler is called and changes the tabindex
    of the first input element.</li>
    <li>If you now tab out of the select box, you can see that the tab order is
    adhered to correctly: you go from the select box to the first input element
    and then to the last element on the page.</li>
    <li>Close the page and open it again.</li>
    <li>Click on the third input element and press Shift + Tab to enter the select
    box.</li>
    <li>Use the down arrow key on the keyboard to change the selected value in the
    select box.</li>
    <li>Now tab out of the select box.</li>
    <li>As you can see, the onchange handler is called, as before (the text in 
    the first input field has changed).</li>
    <li>However, if you tab around now, you will see that the tabindex attribute
    is ignored. Instead the order of the elements in the document source is used
    as the tab order.</li>
    <li>Even if you change the select box value with the mouse now, the tab
    order remains broken. To test again, you need to close the page and open
    it again or reload it by entering the url bar and pressing enter. Hitting
    F5 will not be enough.</li>
 </ol>
 </body>
</html>

當通過某些鍵盤操作（箭頭鍵）更改選擇框值（觸發對tabindex屬性的更改）時，IE將忽略更改的選項卡順序，但是當使用鼠標更改選擇框值時，IE不會忽略tabindex的更改（請參見上面html中有關預期行為和感知行為的更詳細說明）。

為什么IE會這樣？ 特別是，為什么使用鼠標和使用鍵時行為會有所不同。 這是IE中的錯誤嗎？ 現在，我很確定這是IE中的錯誤，但是當然我也有可能做錯了一些事情，而這恰好可以在FF中正常工作。

我已經在Google上搜索了很多，但據我所知，到目前為止，尚未在任何地方報告或討論過此錯誤（如果是一個錯誤）。

一些評論

首先，Firefox不會表現出這種奇怪的行為。

為了避免被誤解，很明顯，當我從選擇框中跳出時，我將使用tabindex 3進入輸入，因為onchange處理程序中的異步代碼可能尚未執行。 但是之后（當第一個輸入中的文本更改時），我希望新的制表符順序將被建立。 這就是FF的行為方式。

似乎IE每次使用向上/向下箭頭鍵時都已經觸發onchange事件，而不是在我離開選擇框時觸發（如FF一樣）。 我不確定這是否與問題有關。

增加的好處：如果打開IE開發人員工具，則將看到DOM中的tabIndex屬性設置正確，而且在不使用鼠標更改選擇框值的情況下也是如此。 但是，在分頁時將忽略tabindex。

我的天真的猜測是IE保留了Taborder的內部表示形式，並且在這種情況下無法正確地重新計算此內部表示形式。

更奇怪：您可以刪除此文件的第5行和第9行（setTimeout調用和右花括號），以使tabindex更改不再被異步調用。 然后，如果您使用鼠標輸入選擇並通過跳出使其離開，則它可以正常工作。 如果按Tab鍵進入選擇區，則仍然會中斷，使用箭頭鍵更改該值並跳出。

Answer 1

在JSFiddle中，更改代碼以設置JavaScript屬性而不是屬性似乎有幫助...

  elem.tabIndex = 2;
  // elem.setAttribute("tabIndex", 2);

Answer 2

我的一位同事發現了一個有趣的解決方法：只需添加

elem.parentNode.replaceChild(elem, elem)

設置tabindex后使其工作。 似乎這種DOM操作會觸發IE內部制表符順序的重新計算，否則將丟失該順序。

盡管這比沒有解決方案要好，但它確實是一個丑陋的hack。 :-(

如果有人知道其他解決方案，但蠻力小一些，我仍然會感興趣。

Answer 3

在IE 9中處理隱藏的單選按鈕時，我遇到了類似的問題。我將tabIndex設置為-1，但是您仍然可以跳到單選組。 我的解決方法是更改CSS可見性屬性，該屬性迫使IE忽略該組。

要隱藏IE 9奇怪的制表行為的單選按鈕，請執行以下操作：

$radioBtns.attr('tabIndex', -1).css('visibility', 'hidden');

要顯示單選按鈕並恢復標准的制表行為：

$radioBtns.removeAttr('tabIndex').css('visibility', '');

在Internet Explorer中的onchange處理程序中更改tabindex時的奇怪行為

問題描述

3 個解決方案

解決方案1
0 2013-07-09 18:12:45

解決方案2
0 已采納 2013-07-10 07:49:25

解決方案3
0 2014-10-17 18:27:14

在Internet Explorer中的onchange處理程序中更改tabindex時的奇怪行為

問題描述

3 個解決方案

解決方案1 0 2013-07-09 18:12:45

解決方案2 0 已采納 2013-07-10 07:49:25

解決方案3 0 2014-10-17 18:27:14

解決方案1
0 2013-07-09 18:12:45

解決方案2
0 已采納 2013-07-10 07:49:25

解決方案3
0 2014-10-17 18:27:14