Best IT Recipes

Capturing a TAB key in a text box

I would like to be able to use the Tab key in the text box to jump to four spaces. Now, when you press the Tab key, my cursor moves to the next input.

Is there any JavaScript that will capture the Tab key in the text box before it pops up in the user interface?

I understand that some browsers (like FireFox) may not allow this. What about a custom keyboard shortcut like Shift + Tab or Ctrl + Q ?

+83
javascript user-interface
Aug 6 '08 at 13:27
source share
6 answers

Even if you keyup keydown / keyup , these are the only events that the tab key triggers, you still need some way to prevent the default action, moving to the next element in tab order.

In Firefox, you can call the preventDefault() method on an event object that is passed to your event handler. In IE, you should return false from the event descriptor. The jQuery library provides a preventDefault method for its event object, which works in IE and FF.

 <body> <input type="text" id="myInput"> <script type="text/javascript"> 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; } } </script> </body>
+93
Aug 16 '08 at 13:55
source share

I would rather have the tab not work than breaking tabs between form elements.

If you want to indent the code in the Markdown field, use Ctrl + K (or ⌘K on Mac).

In terms of the actual termination, jQuery (which uses stack overflow) will stop the event from bubbling when it returns false from the event callback. This makes it easier to work with multiple browsers.

+17
Aug 6 '08 at 13:36
source share

The previous answer is great, but I'm one of those guys who strongly oppose mixing behavior with presentation (putting JavaScript in my HTML), so I prefer to use event handling logic in my JavaScript files. In addition, not all browsers implement the event (or e) equally. You can check before 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 } }
+10
Aug 6 '08 at 13:35
source share

I would advise against changing the default key behavior. I do as much as possible without touching the mouse, so if you make my tab key, do not go to the next form field, I will be very aggravated.

A shortcut key may be useful, especially with large blocks of code and an attachment. Shift-TAB is a bad option because it usually leads me to the previous form field. Maybe a new button would appear in the WMD editor for inserting TAB code using a keyboard shortcut?

+5
Aug 6 '08 at 13:36
source share

there is a problem in the best answer given by ScottKoon

there he is

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

Must be

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

In this regard, it did not work in IE. Hoping ScottKoon will update the code

+3
09 Sep '10 at 6:14
source share

On Chrome on Mac, Alt-Tab inserts a tab character in the <textarea> field.

Here is one: In and!

+2
Feb 17 '10 at 10:55
source share


More articles:


All Articles