When I trigger a blur event on an input, button or select element chrome and firefox keep the current tabindex. If I press tab again after the blur event fired, the browser will focus the next input correctly.
IE11 however loses the tabindex completely, and starts at the beginning of the page.
Example: (run in chrome and IE11 for testing):
Focus any input and press enter => blur. Press tab. Chrome and FF will focus the next input after the last tabindex. IE will focus the first input element on the page.
https://jsfiddle.net/4wnt0o44/1/
HTML:
<form>
<input type="text" length="30" />
<input type="text" length="30" />
<input type="text" length="30" />
<input type="text" length="30" />
<input type="text" length="30" />
</form>
JS:
document.body.addEventListener('keypress', function(event){
if (event.target.tagName.toLowerCase() === 'input') {
const keyCode = event.which || event.keyCode;
if (keyCode === 13) {
event.target.blur()
}
}
})
Are there any known workarounds for this problem?
