Inside Technique : The Tab Key
By Scott Isaacs

We answer one of the top form-related questions - Is it possible to capture the tab key inside of an HTML TextArea? We came up with a creative solution that works in IE4 or later. Please note that we did not extensively test this technique. Please let us know if you experience any problems.

Let's start with a demonstration (IE4 or later only). For this demonstration, you need to hold the CTRL-KEY down as you press the TAB key. This was a design decision and can be easily changed to work with just the TAB key.

Try using CTRL-TAB inside of this textbox.

The trick to enabling this is to understand how the TAB key is processed by the browser. First, the TAB key only fires the onkeydown and the onkeyup event - no onkeypress event is fired. Both these events are physical events and signal that the user has physically pressed or released a key. As physical events, these events are not cancelable. This means that while you can detect that the TAB key is pressed you cannot prevent the tab from moving the focus.

However, as you have already seen, there is a work-around. You can use a timer with a duration of 0 to force code to execute immediately following an event sequence. Therefore, rather than stop the tab from moving the focus we simply use a timer to move the focus immediately back into the textbox.

This keeps the user inside of the textbox. However, once the user tabs their previous selection is lost. The next step is to also cache the selection in the onkeydown event and restore it when we return the focus. When we return the focus we also insert a tab character into the textbox (which does get properly rendered).

It takes only 7 lines of code to accomplish this trick. Below is the complete script from the example above:

<SCRIPT>
/* Copyright 2000 SiteExperts.com/ InsideDHTML.com, LLC
   This code can be reusedas long as the above copyright notice
   is not removed */

function CheckTab(el) {
  // Run only in IE
  // and if tab key is pressed
  // and if the control key is pressed
  if ((document.all) && (9==event.keyCode) && (event.ctrlKey)) {
    // Cache the selection
    el.selection=document.selection.createRange(); 
    setTimeout("ProcessTab('" + el.id + "')",0)
  }
}

function ProcessTab(id) {
  // Insert tab character in place of cached selection
  document.all[id].selection.text=String.fromCharCode(9)
  // Set the focus
  document.all[id].focus()
}
</SCRIPT>
<TEXTAREA ID=MyTabDemo ONKEYDOWN="CheckTab(this)" ROWS=20 COLS=20>
Try using CTRL-TAB inside of this textbox.
</TEXTAREA>

This code should get you started with processing the tab key. We did not write support for removing tabs (shift-tab). This can be added with a little work. You need to check for the shift key (event.shiftKey) and then write code that locates and removes the tab character (if one exists) on the current line. Another interesting feature common in code editors is the ability to select and indent multiple lines by pressing tab. This can also be added but would require you to analyze the selection and insert the tab characters at the appropriate location. Currently our script replaces the selection with a tab key. If you implement either of these let us know and we will publish the script.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.