Page 1 of 2
Disable TAB key for navigation of web page?
Posted: Tue Apr 05, 2005 5:00 pm
by Chris Corbyn
Is there anyway to allow TAB to print a \t (tab) character into a textarea instead of jumping out of the box and trying to navigate the page elements?
Doing something with
tabindex I thought but exactly what I don't know. I'd guess javascript is useless since it can't detect specific key presses too.
*No comments about webAIM and problems for user's who can't use a mouse please*
Thanks

Posted: Tue Apr 05, 2005 5:12 pm
by SystemWisdom
I have never tested this (writing on the fly), but you could try:
Code: Select all
<script language="e;Javascript"e;><!--
function isTab( which, e )
{ var chCode = (window.Event) ? e.which : e.keyCode;
if( chCode == 9 ) // Ascii: horizontal tab - & #09;
{
which.value += ' ';
}
return true;
}
//--></script>
And use it something like:
Code: Select all
<textarea onkeypress="e;return isTab(this,event)"e;></textarea>
I hope that helps! (In fact, ima go test it now too..)
Edit: Didn't work in Firefox.. sorry.. It seems the onkeypress attribute is not called by the TAB key for individual elements, the browser gets it first, and changes focus..

Posted: Tue Apr 05, 2005 5:24 pm
by feyd
map it to an access key, or something..
Posted: Tue Apr 05, 2005 5:43 pm
by Chris Corbyn
feyd wrote:map it to an access key, or something..
How can I map the TAB key to an access key? accesskey="tab"
System Wisdom... I'll test the idea... still get the feeling the tab key will take the curosr out of the focus of the box (

which.focus() should fix it).
Thanks... I'll let you know how it goes
Posted: Tue Apr 05, 2005 5:54 pm
by Chris Corbyn
The code works for all key EXCEPT tab
E.g. This prints a tab If I press "/". I want it to allow TAB to behave like it would in a text editor, rather than a navigation key
You got me thinking with capturing events though

Thanks for getting me started.
Code: Select all
<script type="e;text/javascript"e;>
<!-- Hide
function isTab( which, e ) { which.focus();
var chCode = (window.Event) ? e.which : e.keyCode;
if( chCode == 47 ) { // Ascii: horizontal tab - & #09;
which.value += "e;\t"e;;
}
return true;
}
//-->
</script>
Posted: Tue Apr 05, 2005 6:14 pm
by feyd
I meant make an access key insert a tab.
Posted: Tue Apr 05, 2005 6:19 pm
by Chris Corbyn
feyd wrote:I meant make an access key insert a tab.
Ah... I get ya. I'll have to do that if I can't get it to work any other way.
SystemWisdom's code does print "\t" into the box in FF but not in IE. Just to scatter things too... my addition of which.focus() is working in IE but not in FF. I'd be a bit happier if both worked in one or t'other as opposed to half in IE and half in FF LOL

Posted: Wed Apr 06, 2005 2:05 am
by n00b Saibot
n00b Saibot to rescue...
Code: Select all
<script type="e;text/javascript"e;>
<!-- Hide
function isTab(inp)
{
e = window.event;
inp.focus();
if( e.keyCode == 9 )
{ // Ascii: horizontal tab - & #09;
inp.value += "e;\t"e;;
e.cancelBubble = true;
e.returnValue = false;
}
}
//-->
</script>
<input type=text onkeydown="e;isTab(this)"e;>
any other problem...

Posted: Wed Apr 06, 2005 4:06 am
by Chris Corbyn
Thanks n00b but I still can't get it work.
I'm trying it on IE6 at work (we dont have any other browser for me to test on).
The tab key just jumps out of the textarea (and onto the Browser controls) and no "\t" is outputted.
I managed to prevent that with a simple onBlur="this.focus()" (that's ok by the way - the textarea is the only major object on the page) but it still doesn't register the "\t" character into the textbox. Hmm.. I tried displaying an alert for the keyCode and it does 47 for / and 35 for # etc as expected but TAB is ignored.
Do you have an example of how you have implemented it and seen it work?
This is quite an interesting hurdle for me...
Thanks for all you help

Posted: Wed Apr 06, 2005 4:15 am
by n00b Saibot
This script is all I had put in the html page

and it does work perfectly for me. IE6 I have, never ever thought of changing it

Posted: Wed Apr 06, 2005 4:37 am
by Chris Corbyn
n00b Saibot wrote:This script is all I had put in the html page

and it does work perfectly for me. IE6 I have, never ever thought of changing it

DOH! I'm such an idiot. onkeydown might have helped if I'd looked properly (I was using onKeypress)
Working now... thanks very much. I see you're quite up on on your client side scripting

Posted: Wed Apr 06, 2005 5:11 am
by n00b Saibot
Posted: Wed Apr 06, 2005 11:01 am
by SystemWisdom
Nice! Good work n00b Saibot, I am going to have to use that in the future too!!

I was close, but that only counts in the game of horseshoes..

Posted: Thu Apr 07, 2005 6:53 am
by Chris Corbyn
Updated.
After a quick look at the JS code in this forum (sorry

) I have learnt how to track the cursor position and put the tab there (if the browser supports it), if it's unspupported the function will do what it did before -> put the tab at the end. This is nicer since you can edit the text and add tabs mid-text. Just a few extra lines did the trick.
Code: Select all
function isTab(inp) {
if (inp.createTextRange) {
inp.cursorLoc = document.selection.createRange().duplicate();
}
e = window.event;
inp.focus();
if( e.keyCode == 9 ) { // Ascii: horizontal tab - & #09;
if (inp.createTextRange && inp.cursorLoc) {
inp.cursorLoc.text = inp.cursorLoc.text + "e;\t"e;;
} else {
inp.value += "e;\t"e;;
}
e.cancelBubble = true;
e.returnValue = false;
}
}
BTW - The cancelBubble must be IE only since it doesn't work in Moz at all. It just tabs to the Browser controls etc. not sure if I can get it cross browser compatible

Posted: Thu Apr 07, 2005 7:51 am
by n00b Saibot
Yeah! that cancelBubble thingy comes under IE's DHTML implementation and is not implemented by others. Atleast, as much as I have heard so. It prevents the event from travelling up the event handler hierarchy.