My OperaYou need to be logged in to post in the forums. If you do not have an account, please sign up first.
JS: No (standard) way to disable TAB key?
So I've been writing a very simple auto-complete script for one of my sites that will accept the highlighted entry whenever the user presses ENTER or TAB. This works perfectly, and thanks to event.preventDefault() and event.stopPropagation(), I am able to block the <form> from being submitted when the user presses ENTER. However, while my script does successfully select the entry from the auto-complete list, it still tabs into the next field when I press TAB in Opera (i.e. the element loses its focus). That obviously isn't the desired behavior, and is quite possibly an Opera bug. (Other browsers that support preventDefault() and stopPropagation() keep the focus on the active element in this case.) For those of you who just need to see this "bug," here's some code (an oversimplified example):<html>
<head>
<script type="text/javascript">
function cancel(evt)
{
evt = ( evt || window.event );
key = ( evt.keyCode || evt.charCode || evt.which || 0 );
if ( key == 3 || key == 9 || key == 13 )
{
evt.preventDefault();
evt.stopPropagation();
}
}
window.onload = function()
{
document.getElementById('a').addEventListener('keypress', cancel, false);
}
</script>
</head>
<body>
<form>
<input type="text" id="a" />
<input type="text" id="b" />
</form>
</body>
</html>Notice that it does handle ENTER correctly, but not TAB. I do realize I could use a combination of window.setTimeout() and focus() to regain the lost focus, but that just seems really sloppy. Any thoughts?
Sheboygan Bazaar - Sheboygan County's exclusive online classifieds site.
Street Corner Tickets - The free, fast, and easy way to buy and sell tickets right up until the last minute!
Street Corner Tickets - The free, fast, and easy way to buy and sell tickets right up until the last minute!
I'm running into this same problem too. I'm not sure if it's a genuine bug or a brute-force accessibility feature. The TAB and ENTER keys both have intrinsic functions that disabled users may rely on. I'm making a JavaScript code editor that when the TAB key is pressed, a tab stop is inserted like you can set in normal text editors like HTML Kit. I also created an auto-indent feature where pressing ENTER automatically indents the new line to where the previous line was. It works beautifully in Firefox, but Opera is being difficult.
I'm considering using the Ctrl + "-->" and Ctrl + "<--" keys to do the indenting. Maybe Ctrl + [ or ] too. My auto indent feature is also janked on Opera too, because of the aforementioned ENTER key not respecting the canceled event. I'd just like to know for sure if this is a bug or an intended behavior to enforce accessibility.
I'm considering using the Ctrl + "-->" and Ctrl + "<--" keys to do the indenting. Maybe Ctrl + [ or ] too. My auto indent feature is also janked on Opera too, because of the aforementioned ENTER key not respecting the canceled event. I'd just like to know for sure if this is a bug or an intended behavior to enforce accessibility.
Well, at the risk of showing the Opera developers a way of disabling a hack for the TAB key I just found, here it is. This "disables" the TAB key in Opera. The basic process is as follows:
1. The onfocus event of an element sets a property called lastKey to null. This lastKey property is actually added to the DOM object of an element and is proprietary.
2. The onkeydown event of the same element sets the this.lastKey property to the event object's keyCode.
3. The onblur event checks the this.lastKey if it was the TAB key, and if so sets focus to the element.
A member of Web Developer Forums posted the workaround:
http://www.webdeveloper.com/forum/showpost.php?p=806588&postcount=8
And yes I realize it's not 100% standard, but it works and doesn't break the browser.
1. The onfocus event of an element sets a property called lastKey to null. This lastKey property is actually added to the DOM object of an element and is proprietary.
2. The onkeydown event of the same element sets the this.lastKey property to the event object's keyCode.
3. The onblur event checks the this.lastKey if it was the TAB key, and if so sets focus to the element.
A member of Web Developer Forums posted the workaround:
http://www.webdeveloper.com/forum/showpost.php?p=806588&postcount=8
And yes I realize it's not 100% standard, but it works and doesn't break the browser.
You can also use the keyup event to focus the textarea again like in this script: [UserJS] code editor tab like behaviour