29

i want to PREVENT the default action when the tab key is pressed and only wanna do it in chrome, i can't find a solution for that, can anyone please help ?

i am using jquery

Shaheer
  • 2,105
  • 4
  • 25
  • 39

4 Answers4

74
input.keydown(function(event){
    if (event.keyCode === 9) {
        event.preventDefault();
    }
})

On keyup is too late, you need to call the event on keydown. That worked for me.

Ev Haus
  • 1,578
  • 1
  • 11
  • 23
25

Here's an article on how to detect chrome: http://javascriptly.com/2008/09/javascript-to-detect-google-chrome/

And this question: Disable tab key on a specific div might help you on disabling the tab key. If you are able to combine both yourself, you've probably got it working.

The disable function would become something like:

$('.textarea').on('keyup mouseup', function(e) {
  if(e.which == 9) { e.preventDefault(); }
});

e.which = 9 is the tab key according to the last link given. If you are able to wrap the browser detection around it yourself, I guess you've got your working example.

Community
  • 1
  • 1
Joshua - Pendo
  • 4,331
  • 6
  • 37
  • 51
  • 2
    i am doing preventDefault but it just don't work :( i am doing it on a table cell – Shaheer May 11 '11 at 08:34
  • do you have an examepl only, not sure what you are trying to do with a table cell? Or what happens with it when pressing tab? – Joshua - Pendo May 11 '11 at 08:36
  • i am making an editable grid, when user clicks on a table cell and presses tab then the next cell should be highlighted this works fine but chrome also sets the focus on other elements and with each tab chrome moves the focus to next thing, i dont want that to happen – Shaheer May 11 '11 at 08:39
  • You might want to look into your Grid javscript, it most likely is to have a function that binds the tab key. If you can get the chrome detection in there and wrap the function-content inside `if(!is_chrome)` then it might solve your problem. – Joshua - Pendo May 11 '11 at 08:42
  • but preventDefault should work on both browsers right? i am using preventDefault and it isn't doing what it should do – Shaheer May 11 '11 at 08:46
  • not sure if preventDefault also works on browsers. A common mistake however is that people write down e.preventDefault; instead of e.preventDefault(); (it's a function). – Joshua - Pendo May 11 '11 at 08:55
  • i am writing it as a function – Shaheer May 11 '11 at 09:27
  • Hmm strange.. you've got an online demo somewhere? – Joshua - Pendo May 11 '11 at 11:03
  • @Shaheer, just curious if you got your implementation working? the answer is marked correct but it looks like you were still trying to get it to work? – Danny Bullis May 28 '13 at 07:31
  • Modern working answer: 1. You should use .on, not .bind 2. There can't be a comma between event names. See http://stackoverflow.com/questions/2534089/jquery-multiple-events-to-trigger-the-same-function – Misiur Jul 16 '15 at 18:09
  • By the way, the events should be separated by a space, not a comma. http://api.jquery.com/bind – yaakov Jan 11 '16 at 15:28
  • `KeyboardEvent.keyCode` and `KeyboardEvent.which` are deprecated properties. Use [`KeyboardEvent.key`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key) instead. – Константин Ван Nov 19 '16 at 06:39
3

This might be a bit late, but combining @EvgueniNaverniouk's answer and @K._'s comment (on @Joshua_Pendo's answer), it is determined that you must use onkeydown and the more recent event.key instead of event.keyCode. What event.key does is it returns the name of the key instead of the code. For example, the tab key will be returned as "Tab" (This is case sensitive). Here is the finished working code:

function checkForTab(event) {
    if (event.key == "Tab") {
        event.preventDefault();
    }
    else {
        //whatever stuff if not Tab
    }
}
document.getElementById("element").onkeydown = checkForTab(event);


function checkForTab(event) {
 if (event.key == "Tab") {
  event.preventDefault();
        document.getElementById('element').value += " Also notice this text appears every time you press tab!";
 }
 else {
  //whatever stuff if not Tab
 }
}
document.getElementById('element').onkeydown = checkForTab;
//Trick is to use keydown and use event.key instead of keyCode
<textarea id="element" style="width: 300px; height: 100px;">Press tab key here, you'll see default action doesn't occur!</textarea>

Run the Code Snippet above to see an example of what I mean. You can now use a code like this to replace the default action of Tab with the action that adds spaces to a textarea. Note: the reason I use .key instead of .keyCode is because .keyCode is now deprecated as @K._ mentioned. Hope this helps!

Cannicide
  • 4,360
  • 3
  • 22
  • 42
  • just a hint: this did better for me than all the answers stated at the time I wrote this. @EvgueniNaverniouk's answer helped, but still didn't work 100%. – Cannicide Feb 01 '17 at 00:29
  • I am getting console.log(event.key) as undefined for tab key. Can you tell me why ? (blur)=" focusK($event) – Chandresh Mishra Sep 19 '19 at 16:21
  • I believe `event.key` in your code is undefined because you are using the `blur` event instead of the `onkeydown` event, @ChandreshMishra. The `blur` event only fires after the textbox has lost focus, so preventing the TAB action with it will not work. In addition, the event for the `blur` event does not measure what keys are pressed because it is a focus-based event, not a keyboard-based event. Simply call your `focusK` method like so: `keydown="focusK"` on your textbox. Hope this helps. – Cannicide Sep 22 '19 at 14:10
  • Thanks it solved my issue. I had wasted 2 days in this :( – Chandresh Mishra Sep 23 '19 at 08:39
0

JS:

  document.getElementById('message_textarea').addEventListener('keydown', (event) => {
    console.log('tab pressed on message textarea');
    if (event.keyCode === 9) {
      event.preventDefault();
    }
  });

HTML:

<textarea id="message_textarea"></textarea>
ame
  • 773
  • 9
  • 21