Disable TAB key for navigation of web page?

JavaScript and client side scripting.

Moderator: General Moderators

User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Disable TAB key for navigation of web page?

Post 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 :)
User avatar
SystemWisdom
Forum Commoner
Posts: 69
Joined: Sat Mar 26, 2005 5:54 pm
Location: A Canadian South of the 49th Parallel

Post by SystemWisdom »

I have never tested this (writing on the fly), but you could try:

Code: Select all

<script language=&quote;Javascript&quote;><!--
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=&quote;return isTab(this,event)&quote;></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.. :(
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

map it to an access key, or something..
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 ( :idea: which.focus() should fix it).

Thanks... I'll let you know how it goes
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 :lol: Thanks for getting me started.

Code: Select all

<script type=&quote;text/javascript&quote;>
<!-- Hide
function isTab(  which, e ) {  which.focus();
    var chCode = (window.Event) ? e.which : e.keyCode;

    if( chCode == 47 ) { // Ascii: horizontal tab - & #09;
        which.value += &quote;\t&quote;;
    }
    return true;
}
//-->
</script>
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I meant make an access key insert a tab.
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 :?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

n00b Saibot to rescue... :lol:

Code: Select all

<script type=&quote;text/javascript&quote;>
<!-- Hide
function isTab(inp)
{
  e = window.event;
  inp.focus();
  if( e.keyCode == 9 )
  { // Ascii: horizontal tab - & #09;
   inp.value += &quote;\t&quote;;
   e.cancelBubble = true;
   e.returnValue = false;
  }
 }
//-->
</script>
<input type=text onkeydown=&quote;isTab(this)&quote;>
any other problem... :D
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 :D
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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 ;)
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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) :roll:

Working now... thanks very much. I see you're quite up on on your client side scripting :P
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

d11wtq wrote:I see you're quite up on on your client side scripting :P
Yah! My 1st preference for coding utilities etc. is Client-side. I jus luv it. :kiss: :kiss: :D
User avatar
SystemWisdom
Forum Commoner
Posts: 69
Joined: Sat Mar 26, 2005 5:54 pm
Location: A Canadian South of the 49th Parallel

Post by SystemWisdom »

Nice! Good work n00b Saibot, I am going to have to use that in the future too!! :D
I was close, but that only counts in the game of horseshoes.. :P
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Post 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 + &quote;\t&quote;;
		} else {
			inp.value  += &quote;\t&quote;;
		}
		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 :?
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post 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.
Post Reply