Databases
StackOverflow2013
Postsdbo
POWeird Behaviour When Changing the tabindex in onchange Handler in Internet Explorer
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWeird Behaviour When Changing the tabindex in onchange Handler in Internet Explorer
    primarykey
    data
    text
    <p>Given the following code:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script&gt; function updateTabIndex() { setTimeout(function() { var elem = document.getElementById("id1") elem.setAttribute("tabIndex", 2) elem.setAttribute("value", "now: tabindex 2") }, 100) } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h1&gt;Weird Behaviour When Changing the tabindex in onchange Handler in Internet Explorer&lt;/h1&gt; &lt;p&gt;&lt;input id="id1" tabindex="-1" value="tabindex: (-1)"/&gt;&lt;/p&gt; &lt;p&gt;&lt;select tabindex="1" size="1" onchange="updateTabIndex()" onpropertychange="updateTabIndex()"&gt; &lt;option&gt;tabindex 1 - an option&lt;/option&gt; &lt;option&gt;tabindex 1 - another option&lt;/option&gt; &lt;/select&gt;&lt;/p&gt; &lt;p&gt;&lt;input tabIndex="3" value="tabindex 3"/&gt;&lt;/p&gt; &lt;h2&gt;Instructions&lt;/h2&gt; &lt;ol&gt; &lt;li&gt;Open this page in IE. To be precise, the problem is reproducible in (at least): &lt;ul&gt; &lt;li&gt;IE 8, Version 8.0.6001.18702CO on Windows XP and&lt;/li&gt; &lt;li&gt;IE 9, Version 9.0.8112.16421 on Windows 7 Professional, 64 bit&lt;/li&gt; &lt;/ul&gt; &lt;li&gt;Use the &lt;em&gt;mouse&lt;/em&gt; to change the value of the select box.&lt;/li&gt; &lt;li&gt;As you can see, the onchange handler is called and changes the tabindex of the first input element.&lt;/li&gt; &lt;li&gt;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.&lt;/li&gt; &lt;li&gt;Close the page and open it again.&lt;/li&gt; &lt;li&gt;Click on the third input element and press Shift + Tab to enter the select box.&lt;/li&gt; &lt;li&gt;Use the down arrow key on the keyboard to change the selected value in the select box.&lt;/li&gt; &lt;li&gt;Now tab out of the select box.&lt;/li&gt; &lt;li&gt;As you can see, the onchange handler is called, as before (the text in the first input field has changed).&lt;/li&gt; &lt;li&gt;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.&lt;/li&gt; &lt;li&gt;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.&lt;/li&gt; &lt;/ol&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>IE ignores the changed tab order when the select box value (which triggers the change to the tabindex attribute) is changed by some keyboard action (arrow keys) but does not ignore the tabindex change when the select box value is changed with the mouse (see more detailed explanation about the expected and perceived behaviour in html above).</p> <p>Why does IE behaves like that? In particular, why is the behaviour different when using the mouse and when using the keys. Is it a bug in IE? Right now, I'm pretty sure it is a bug in IE here, but of course there is also the chance that I'm doing something wrong which just happens to work as expected in FF.</p> <p>I already googled quite a bit, but as far as I can see, this bug (if it is one) has not been reported or discussed anywhere until now. </p> <p><strong>Some remarks</strong></p> <p>First of all, Firefox does not exhibit this weird behaviour.</p> <p>Just to avoid being misunderstood, it is clear that, when I tab out from the select box, I'll get to the to the input with tabindex 3, because the asynchronous code in the onchange handler might not have been executed yet. But after that (when the text in the first input has changed), I expect the new tab order to be established. This is how FF behaves.</p> <p>It seems that IE already fires the onchange event each time I use the up/down arrow key and not when I leave the select box (as FF does). I'm not sure if that is related to the problem.</p> <p>Added Bonus: If you open the IE developer tools you will see that the tabIndex attribute is set correctly in the DOM, also when changing the select box value without the mouse. But the tabindex is ignored when tabbing around.</p> <p>My (naive) guess is that IE keeps an internal representation of the taborder and that this internal representation is not recalculated correctly in this case.</p> <p>More weirdness: You can delete lines 5 and 9 of this file (setTimeout call and closing curly brace), so that the tabindex change is no longer called asynchronously. It then works correctly if you enter the select with the mouse and leave it by tabbing out. It still breaks if you tab into the select change the value with the arrow key and tab out.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USbasti1302
    1. USbasti1302
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWeird Behaviour When Changing the tabindex in onchange Handler in Internet Explorer
      1. USbasti1302
      1. VTFavorite
    1. COI put your code to a [fiddle](http://jsfiddle.net/Taer5/)...
      singulars
      1. POWeird Behaviour When Changing the tabindex in onchange Handler in Internet Explorer
      1. USTeemu
    2. COFor some reason jsfiddle.net seems to be not working for me in IE 9 right now. It hangs at "Initializing the awesome!". Not so awesome :-)
      singulars
      1. POWeird Behaviour When Changing the tabindex in onchange Handler in Internet Explorer
      1. USbasti1302
    3. COClose the DevTools when loading the fiddle, the open when it's completely loaded.
      singulars
      1. POWeird Behaviour When Changing the tabindex in onchange Handler in Internet Explorer
      1. USTeemu
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload