is there a way to disable 'tab' on a input type='text'?

Question

is there a cross-browser solution to disable 'tab' on a input type='text' ?

<input type='text' />

Pressing 'tab' moves you to the next 'focusable' component (for example a button)

I want instead 'tab' to do something else. For example Even in a google search tab is just used to autocomplete the suggested text instead of moving you to the next focusable component...

thanks

Solution 1

document.querySelector('input').addEventListener('keydown', function (e) {
    if (e.which == 9) {
        e.preventDefault();
    }
});

Depends on how cross-browser you are talking though, as the above only supports IE9 (and other modern browsers).

http://jsfiddle.net/ExplosionPIlls/YVUzz/

IE8- use attachEvent instead of addEventListener and e.keyCode instead of e.which, and there is no preventDefault, but you can use return false.

Solution 2

a non jQuery implementation would be a bit like this -

HTML would be

<input type="text" id="myField1" onkeydown="return stopTab(event);" />

and JS something like below

function stopTab( e ) {
    var evt = e || window.event
    if ( evt.keyCode === 9 ) {
        return false
    }
}

Solution 3

Yes,check if the key pressed was tab, and if so, returns false:

<form class='noTab'>
    <input type="text" />
    <input type="text" />
    <select>
        <option>a</option>
        <option>b</option>
    </select>
    <textarea>
    </textarea>
</form>

jQuery('.noTab').find('input,select,textarea').keydown(function (e) {
    if (e.which === 9) {
        return false;
    }
});

jQuery will allow this work on legacy browsers.

http://jsfiddle.net/JxMhY/

On that fiddle it shows 2 forms, one with the class "noTab" and one without, as tab/shift+tab are useful for many forms, but not the one which has a special "tab" action.

Comments

[Admin]

$('#form_name input') would be more effective and cleaner :)

[Rodrigo Siqueira]

querySelector is also not supported by ie < 7, and ff < 3 caniuse.com/queryselector

[Zo72]

querySelector is irrelevant. it's the event listener's code that matters. e.preventDefault

[Explosion Pills]

He didn't specify that he was using jQuery, but if he is then this is the optimal solution

[epascarello]

And e.preventDefault()/e.which is not in all browsers.