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

lcgray on Oct 4, 2004 at 2:01:31 PMNo Rating
Does anyone know how to set the event.keyCode to the Shift-Tap?   the event.shiftKey is read-only
gman on Oct 11, 2003 at 7:05:33 AMRating: 3

Yes, but how would this be done for a text box (not a textArea) within a Form.

(i.e.

<FORM  .....

<INPUT TYPE="text" NAME="oemtag" SIZE="40">

.....

</FORM>

DieterStruik on Sep 13, 2002 at 12:03:37 AMRating: 4

It's a very nice tip. However I managed to fully disable the tab and replace it's function.

See my article.

Dieter Struik 

 

 

 

 

 

sumitkhan on Oct 7, 2001 at 1:04:25 PMRating: 5
sumitkhan on Oct 7, 2001 at 1:03:18 PMRating: 5
NealMiller1 on Jul 12, 2001 at 3:30:26 PMNo Rating

Doesn't work for me in IE 5.5. The cursor skips to the hyperlink on the bottom of the page.

azhar123 on Jul 11, 2001 at 9:47:57 AMNo Rating

sowwy!!! lets try again...

 

<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) {

if (shiftVal==false) {
// tab only

// 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<xSelection.length;x++) {
if ((xSelection.charCodeAt(x)==10) && (xSelection.charCodeAt(x-1)==13)) {
// theres a 13 and 10 charcode in succession = newline
xSelection=xSelection.substring(0,x+1)+String.fromCharCode(9)+xSelection.substring(x+1,xSelection.length)
} // if charcodeat
} // for
document.all[id].selection.text=xSelection
}
else {
document.all[id].selection.text=String.fromCharCode(9)
}

}
else {
// shift and tab

// Remove 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
if (xSelection.charCodeAt(0)==9)
xSelection=xSelection.substring(1,xSelection.length)

for (var x=0;x<xSelection.length;x++) {
if ((xSelection.charCodeAt(x)==9) && (xSelection.charCodeAt(x-1)==10) && (xSelection.charCodeAt(x-2)==13)) {
// theres a 13,10 and 9(tab) charcode in succession = newline with tab
xSelection=xSelection.substring(0,x)+xSelection.substring(x+1,xSelection.length)
} // if charcodeat
} // for
document.all[id].selection.text=xSelection
}
else {
alert ("Please select text when using Shift+Tab")
}

}

// Set the focus
document.all[id].focus()
}
</SCRIPT>

More 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.