Capturing TAB key in text box

Question

I would like to be able to use the Tab key within a text box to tab over four spaces  The way it is now  the Tab key jumps my cursor to the next input   Is there some JavaScript that will capture the Tab key in the text box before it bubbles up to the UI   I understand some browsers  i e  FireFox  may not allow this  How about a custom key-combo like Shift Tab  or Ctrl Q

User · Answer

there is a problem in best answer given by ScottKoon

here is it

} else if(el.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Should be

} else if(myInput.attachEvent ) {
    myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}

Due to this it didn't work in IE. Hoping that ScottKoon will update code

User · Answer

Even if you capture the keydown keyup event  those are the only events that the tab key fires  you still need some way to prevent the default action  moving to the next item in the tab order  from occurring   In Firefox you can call the preventDefault   method on the event object passed to your event handler  In IE  you have to return false from the event handle  The JQuery library provides a preventDefault method on its event object that works in IE and FF    lt body gt   lt input type  text  id  myInput  gt   lt script type  text javascript  gt      var myInput   document getElementById  myInput        if myInput addEventListener             myInput addEventListener  keydown  this keyHandler false         else if myInput attachEvent             myInput attachEvent  onkeydown  this keyHandler      damn IE hack               function keyHandler e            var TABKEY   9          if e keyCode    TABKEY                this value                        if e preventDefault                    e preventDefault                              return false                   lt  script gt   lt  body gt

User · Answer

The previous answer is fine  but I m one of those guys that s firmly against mixing behavior with presentation  putting JavaScript in my HTML  so I prefer to put my event handling logic in my JavaScript files  Additionally  not all browsers implement event  or e  the same way  You may want to do a check prior to running any logic   document onkeydown   TabExample   function TabExample evt      var evt    evt    evt     event    event   null     var tabKey   9    if evt keyCode    tabKey           do work

User · Answer

I d rather tab indentation not work than breaking tabbing between form items   If you want to indent to put in code in the Markdown box  use Ctrl K  or  K on a Mac    In terms of actually stopping the action  jQuery  which Stack Overflow uses  will stop an event from bubbling when you return false from an event callback  This makes life easier for working with multiple browsers

User · Answer

I would advise against changing the default behaviour of a key   I do as much as possible without touching a mouse  so if you make my tab key not move to the next field on a form I will be very aggravated   A shortcut key could be useful however  especially with large code blocks and nesting   Shift-TAB is a bad option because that normally takes me to the previous field on a form   Maybe a new button on the WMD editor to insert a code-TAB  with a shortcut key  would be possible

User · Answer

In Chrome on the Mac  alt-tab inserts a tab character into a  lt textarea gt  field   Here   s one    Wee

[javascript] Capturing TAB key in text box

Examples related to javascript

Examples related to user-interface