Skip element in tab order

[ShadowMage]

Hey guys, I'm wondering if there is a valid way to make an element "invisible" to the tab button. By that I mean, I don't want to be able to get to that element by using the tab button. To get focus on the element requires the user to click into the element.I tried this:

<div id='input_container'>	<input type='text' id='inputA' name='inputA' tabindex='1' value='a' />	<input type='text' id='inputB' name='inputB' tabindex='2' value='b' />	<input type='text' id='inputC' name='inputC' tabindex='3' value='c' />	<input type='text' id='inputD' name='inputD' tabindex='-1' value='d' />	<input type='text' id='inputE' name='inputE' tabindex='4' value='e' />	<input type='text' id='inputF' name='inputF' tabindex='5' value='f' /></div>

Which works, but it doesn't validate, saying that tabindex has an invalid value for inputD. Is there another way to do this?

[Synook]

that would be incredibly bad for accessibility, which is probably why there is nothing you can do in HTML... if you really wanted to implement this though I'm sure there's something you could come up with in JavaScript which checks when the tab key is pressed, checks whether the, uh, forbidden element is focused, and directs the caret somewhere else if so.

[ShadowMage]

that would be incredibly bad for accessibility, which is probably why there is nothing you can do in HTML... if you really wanted to implement this though I'm sure there's something you could come up with in JavaScript which checks when the tab key is pressed, checks whether the, uh, forbidden element is focused, and directs the caret somewhere else if so.

I know, but accessibility isn't really a concern since this is an application that will be used internally by our sales staff for creating quotes. And none of them have any accessibility needs. I was hoping it would be a simple solution so it could be easily changed in the future if we do hire someone who has special needs, but doesn't look like that is the case, though I do understand why there isn't a valid solution in HTML. So I guess I'll just have to deal with it and have those elements at the bottom of the tab order... Thx tho!

[jeffman]

I do not think there is a JavaScript answer, as most browsers no longer capture tab keys. I believe this is accessibility mandated at a high level.

[dink]

What about setting the tab index?

[thescientist]

didn't you read the first post? He tried setting it to a negative number, which works, but counts as invalid markup.

[Synook]

I do not think there is a JavaScript answer, as most browsers no longer capture tab keys. I believe this is accessibility mandated at a high level.

Instead of checking whether the tab key was pressed when the element was focused, you could do it the other way round and check whether the mouse was pressed when the element gained focus, then blur based on that.Edit: this seems to work, at least in Chrome:

var mouse_pressed = false;window.addEventListener("load", function() {	window.addEventListener("mousedown", function() {		mouse_pressed = true;	}, false);	window.addEventListener("mouseup", function() {		mouse_pressed = false;	}, false);	document.getElementById("input").addEventListener("focus", function() {		if (!mouse_pressed) this.blur(); // you could probably shift the focus to the next element here instead	}, false);}, false);

Edit₂: of course, this wouldn't work if they held the mouse button down and pressed tab at the same time... but they'd have to be pretty desperate by then .

[dink]

didn't you read the first post? He tried setting it to a negative number, which works, but counts as invalid markup.

My sincere apologies. I missed the negative tabindex...

[Ingolme]

Maybe you can add an "onfocus" event to the input element that will focus the next input when it gets focused.

[Synook]

Maybe you can add an "onfocus" event to the input element that will focus the next input when it gets focused.

He still wants the user to be able to select the element using the mouse, though — just not by tabbing to it.

[ShadowMage]

Instead of checking whether the tab key was pressed when the element was focused, you could do it the other way round and check whether the mouse was pressed when the element gained focus, then blur based on that.Edit: this seems to work, at least in Chrome:

var mouse_pressed = false;window.addEventListener("load", function() {	window.addEventListener("mousedown", function() {		mouse_pressed = true;	}, false);	window.addEventListener("mouseup", function() {		mouse_pressed = false;	}, false);	document.getElementById("input").addEventListener("focus", function() {		if (!mouse_pressed) this.blur(); // you could probably shift the focus to the next element here instead	}, false);}, false);

Edit₂: of course, this wouldn't work if they held the mouse button down and pressed tab at the same time... but they'd have to be pretty desperate by then .

Well, that actually seems simple enough. I might give that a try. Thanks, Synook!