SiteExperts.com Logo Home | Community | Developer's Paradise
User Groups | Site Tools | Site Information | Search
 Main Menu
 Resource

The Tab Key

Categories...
Client User Group
Internet Explorer
Language
JavaScript
Product
IE4, IE5
Task
Form Enhancement
Technology
Intrinsic Controls

Sponsored Links
Developer's Paradise : Inside Technique :
The Tab Key
Submission by SiteExperts Staff

Go to the resource:
The Tab Key

Add to Assistant

Short Description
We show you how to track and enable the tab key inside of your HTML text boxes.

Long Description
We answer one of the top form-related questions - Is it possible to capture the tab key inside of an HTML TextArea? We demonstrate a creative solution that works in IE4 or later.

Author
Scott Isaacs
Date/ Version
6/19/2000
Submission URL
http://www.SiteExperts.com/tips/elements/ts34/page1.asp
Submission Date
Jun 19,2000
Last Update
Jun 19,2000
 

Discussion and Rate this Resource
Overall Rating: 4.1

azhar123 on Jul 11, 2001 at 9:37:58 AMNo Rating

i modified the code slightly to cater for multiple line selection tab and shift+tab.  not the best of code but here goes:

<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)) { // Cache the selection if (event.shiftKey) { el.selection=document.selection.createRange(); setTimeout("ProcessTab('" + el.id + "',true)",0) } else { el.selection=document.selection.createRange(); setTimeout("ProcessTab('" + el.id + "',false)",0) } } } function ProcessTab(id,shiftVal) { //var re if (shiftVal==false) { //tab only //re = /\r\n[^\t]/ // Insert tab character in place of cached selection if (document.all[id].selection.text.length!=0) { //more than one char selected xSelection=document.all[id].selection.text xSelection=String.fromCharCode(9)+xSelection for (var x=0;x
tonyj on Jul 12, 2000 at 6:28:28 AMRating: 3

With a slight modification to the code, you can use the tab key without the control key with only the one function. Even works in IE5 without returning to start of line. See code below.

<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)) {
    // Cache the selection
    el.selection=document.selection.createRange();
 el.selection.text=String.fromCharCode(9)
 event.returnValue=false
  }
}

</SCRIPT>
<TEXTAREA ID=MyTabDemo ONKEYDOWN="CheckTab(this)" ROWS=20 COLS=20>
Try using CTRL-TAB inside of this textbox.
</TEXTAREA>

 

mack on Jun 28, 2000 at 8:06:09 AMRating: 4
works great for me.  many people have been looking for a solution to this problem.  simple solutions are always best.
sub on Jun 28, 2000 at 6:10:52 AMNo Rating
I also tried, and works for me, but the cursor goes to the start of line !? (IE 5.50.3825.1300)
Scott Isaacs on Jun 20, 2000 at 8:05:04 AMNo Rating

Please make sure you are holding down the CTRL key when you press TAB.  (I tested with the same build of IE 5 as listed below).

I also updated the text above the demo to try and make this clearer.

-Scott

mack on Jun 20, 2000 at 7:12:37 AMNo Rating
You need to hold down the control key to make it enter a tab character instead of shifting focus.  Scott, you might want to update the text of the article.
KrizInBizz on Jun 20, 2000 at 2:22:10 AMRating: 1
not working in IE5
Christian on Jun 20, 2000 at 1:47:55 AMNo Rating
Hi, i tired it, and it is not working for me IE 5.00.2920

Most Recent Ratings/ Comments


To rate and comment on a resource, you must first logon.

If you are not registered, please register yourself to become a member of the SiteExperts.community.

User Name
Password

Copyright © 1997-2008 InsideDHTML.com, LLC. All rights reserved.