By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,568 Members | 1,194 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,568 IT Pros & Developers. It's quick & easy.

Controlling tab order with JavaScript

P: n/a
Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.

When tab is pressed in the second input box I want focus to move
to the first. It does this in IE, but not Mozilla 1.7.10. I
can make it work in Mozilla by changing the event from onkeydown
to onkeypress, but then it doesn't work in IE. Is there any
way to make this work generally without having to make the
inline event type dependent on the browser type?

Thanks.

<html>
<head>
<title>
Test Tabs
</title>
<script type="text/javascript">
function check_tab(e) {
if (e.keyCode == 9 ) {
document.getElementById('i1').focus();
e.returnValue = false; // for IE
if (e.preventDefault) e.preventDefault(); // for Mozilla
}
}
</script>
</head>
<body>
<input type="text" id="i1"/>
<br/>
<input type="text" id="i2" onkeydown="check_tab(event)"/>
<br/>
<button type="button">Button</button>
</body>
</html>
Sep 24 '05 #1
Share this Question
Share on Google+
22 Replies


P: n/a
Mark Reginald James said the following on 9/24/2005 2:28 PM:
Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.


Your problem is that you are trying to redefine the way the browser
works. That is going to confuse users because they expect the default
behavior and you are screwing with it.

If you want to change the tab order, set the tabindex.

<URL: http://www.w3.org/TR/REC-html40/inte...#adef-tabindex >

Problem solved.

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
Sep 24 '05 #2

P: n/a
Randy Webb wrote:
Mark Reginald James said the following on 9/24/2005 2:28 PM:
Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element. Simple HTML that demonstrates the problem is below.

Your problem is that you are trying to redefine the way the browser
works. That is going to confuse users because they expect the default
behavior and you are screwing with it.

If you want to change the tab order, set the tabindex.

<URL: http://www.w3.org/TR/REC-html40/inte...#adef-tabindex >

Problem solved.


Thanks Randy, but I don't think I can do that easily, if at all.

What I'm really doing is inserting a new text box when focus
is lost on the bottom text box of a set and the contents of
the box is non-blank. If focus is lost by clicking on
another element, then move the focus there. But if tab is
pressed, focus should move to the new box.

It would be quite complicated to dynamically set the tabindices,
and I'm not even sure whether browers will immediately take
into account the tabindex of the newly-created box.

The code I gave works, it's just browser-dependent. I don't
know why onkeydown and onkeypress have different tab-related
behaviour in Mozilla.
Sep 24 '05 #3

P: n/a
I've somehow got this auto-form-extension code
working without the need for either blocking
the tab action plus using focus(), or using tabIndex.

Not sure what I did, but now tab triggers the
onkeydown event, creating the new box, then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.

The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.

Hope someone finds this helpful.
Sep 24 '05 #4

P: n/a
ASM
Mark Reginald James a écrit :
Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element.


No need to catch key event ...
You can use html way
or if it is with only one specific input
and using javascript
because to prss tab make element loses focus
use simply : onblur

demo :

<html><head><title>Test Tabs</title>
<style type="text/css">
input { background:#ffc; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
</style>
</head><body>
<hr>method 1 (html)<br />
input 2 : <input type="text" id="i_a1" tabIndex=2 />
<b>input 1 : </b><input type="text" id="i_a2" tabIndex=1 />
input 3 : <input type="text" id="i_a2" tabIndex=3 />
<button type="button">Button</button>
<hr>method 2 (javascript)<br />
input 2 : <input type="text" id="i_b1"
onblur="with(document.getElementById('i_b3')){focu s();select();}" />
<b>input 1 : </b><input type="text" id="i_b2"
onblur="with(document.getElementById('i_b1')){focu s();select();}" />
input 3 : <input type="text" id="i_b3" />
<button type="button">Button</button>
<hr>method 3 (function javascript)<br />
<script type="text/javascript">
function jump(field) {
with(document.getElementById(field))
{
focus();
select();
}
}
</script>
input 2 : <input type="text" id="i_c1" onblur="jump('i_c3');" />
<b>input 1 : </b><input type="text" id="i_c2" onblur="jump('i_c1');" />
input 3 : <input type="text" id="i_c3" />
<button type="button">Button</button>
<hr></body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 24 '05 #5

P: n/a
ASM
Mark Reginald James a écrit :
I've somehow got this auto-form-extension code
working without the need for either blocking
the tab action plus using focus(), or using tabIndex.

Not sure what I did, but now tab triggers the
onkeydown event, creating the new box,
Now we have creation of a new text-field on the fly ?
then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.
do not undertsand ... onblur without keydown
how make you that working ?
The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.
onblur would have to be enough ... no?
Hope someone finds this helpful.

--
Stephane Moriaux et son [moins] vieux Mac
Sep 24 '05 #6

P: n/a
ASM wrote:
Now we have creation of a new text-field on the fly ?
Yes, for my original post I tried to boil the problem
down to the simplest code that demonstrated the problem,
but it turns out easier to automatically move to a newly
created box rather than to a specific existing box.
then
the tab behaviour is activating the new box.
I also have an onblur trigger that also creates
the new box unless the onkeydown event has already
created it.

do not undertsand ... onblur without keydown
how make you that working ?


Sorry ASM, I also do not understand what you are saying.

The idea is to allow a user to create a list of
text boxes which may represent something like a list
of responses to a question. Initially there is only
one text box. But as soon as the user leaves that
box with non-blank content, a new box in the list
is automatically created. If they leave the box by
clicking elsewhere, the new box is created, but focus
is now where they clicked. But if they leave the box
by pressing tab, I not only wanted the new box created,
but also that focus move to the new box. In this way
the user can create a list of options of any length
just by typing them and tabbing to a new one.
The new box doesn't get the focus after a tab if you
create it in the original box's onchange event. You
have to use the original box's onkeydown/onblur combo.

onblur would have to be enough ... no?


I don't think I'd properly tried onblur on its own,
but tried just now and found it didn't work. Tab
takes you to the box that was originally next in
sequence, skipping the new box.

I can post the code if anyone would like to see it.
Sep 25 '05 #7

P: n/a
ASM wrote:
Mark Reginald James a écrit :
Hi,

I'm trying to use a keyboard event function to change what
element gets the focus after tab is pressed in a particular
element.

No need to catch key event ...
You can use html way
or if it is with only one specific input
and using javascript
because to prss tab make element loses focus
use simply : onblur

demo :

<html><head><title>Test Tabs</title>
<style type="text/css">
input { background:#ffc; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
</style>
</head><body>
<hr>method 1 (html)<br />
input 2 : <input type="text" id="i_a1" tabIndex=2 />
<b>input 1 : </b><input type="text" id="i_a2" tabIndex=1 />
input 3 : <input type="text" id="i_a2" tabIndex=3 />
<button type="button">Button</button>
<hr>method 2 (javascript)<br />
input 2 : <input type="text" id="i_b1"
onblur="with(document.getElementById('i_b3')){focu s();select();}" />
<b>input 1 : </b><input type="text" id="i_b2"
onblur="with(document.getElementById('i_b1')){focu s();select();}" />
input 3 : <input type="text" id="i_b3" />
<button type="button">Button</button>
<hr>method 3 (function javascript)<br />
<script type="text/javascript">
function jump(field) {
with(document.getElementById(field))
{
focus();
select();
}
}
</script>
input 2 : <input type="text" id="i_c1" onblur="jump('i_c3');" />
<b>input 1 : </b><input type="text" id="i_c2" onblur="jump('i_c1');" />
input 3 : <input type="text" id="i_c3" />
<button type="button">Button</button>
<hr></body>
</html>


Thanks Stephane. Your code using onblur alone works for the
problem as originally posted. It unfortunately doesn't work
when you want to tab to a new box created by the onblur event
itself. The onkeydown/onblur combo is needed for this.

I'll keep your solution in mind if I ever want to dynamically
change the tab order of an existing set of boxes. Thanks again
for taking a look at my problem.
Sep 25 '05 #8

P: n/a
ASM
Mark Reginald James a écrit :

Thanks Stephane. Your code using onblur alone works for the
problem as originally posted. It unfortunately doesn't work
when you want to tab to a new box created by the onblur event
itself. The onkeydown/onblur combo is needed for this.


if it is not too late :

absolutly not !

<html>
<script type="text/javascript">
var ind= 0;
function jump(field) {
if(document.getElementById(field))
with(document.getElementById(field))
{
focus();
select();
}
else {
ind++;
var I = document.createElement('INPUT');
I.id = 'i_n'+ind;
I.size = 5;
I.onblur = function() { jump('new'); }
document.forms[0].appendChild(I);
jump('i_n'+ind);
}
}
</script>

<form>
<p>input 2 : <input type="text" id="i_c1" onblur="jump('i_c3');" />
<b>first input : </b><input type="text" id="i_c2" onblur="jump('i_c1');" />
<u>last input :</u> <input type="text" id="i_c3" onblur(jump('new'); />
<button type="button">Button</button>
</form>

<style type="text/css">
input { background:#ffc; width: 3em;margin: 0px 4px; }
input:focus { background: yellow }
b { color: red }
u { color: blue }
</style>
</html>
--
Stephane Moriaux et son [moins] vieux Mac
Sep 26 '05 #9

P: n/a
ASM wrote:
if it is not too late :
No, thanks Stephane for having another look.
absolutly not !
...
<u>last input :</u> <input type="text" id="i_c3" onblur(jump('new'); />
...


I fixed the typo for onblur on this line and tried it out. It worked
in IE, but in Mozilla 1.7.10 the new box was created but focus moved
to the browser window address box rather than to the new box. I
don't know if this is a Mozilla bug, for which you have to use the
onkeydown/onblur method as a work-around.
Sep 27 '05 #10

P: n/a
ASM
Mark Reginald James a écrit :
ASM wrote:
if it is not too late :

No, thanks Stephane for having another look.
absolutly not !
...
<u>last input :</u> <input type="text" id="i_c3" onblur(jump('new'); />
...

I fixed the typo for onblur on this line


:-)
and tried it out. It worked
in IE, but in Mozilla 1.7.10 the new box was created but focus moved
to the browser window address box rather than to the new box.


Ha ?
it works fine in all my browsers (FF 1.07, IE 5.2, Opera 8.01)
Curiously Safari displaies 3 more inputs and jumps to therd
(I'll see that later)

But you're right it seems (FF) that location bar flashes while
new input and its jumping fire

A litte timer on end of function would probably fix the trouble

document.forms[0].appendChild(I);
setTimeout('jump('+I.id+')',500);
}
}

tell me back

--
Stephane Moriaux et son [moins] vieux Mac
Sep 27 '05 #11

P: n/a
ASM wrote:
it works fine in all my browsers (FF 1.07, IE 5.2, Opera 8.01)
Curiously Safari displaies 3 more inputs and jumps to therd
(I'll see that later)

But you're right it seems (FF) that location bar flashes while
new input and its jumping fire

A litte timer on end of function would probably fix the trouble

document.forms[0].appendChild(I);
setTimeout('jump('+I.id+')',500);
}
}


I just downloaded FF 1.07 and 1.5b1 to try them out, and they
do the same as Mozilla 1.7. Tabbing from the "last input" box
goes to the new box, but tabbing from any new box goes to and
stays in the address bar. The first one probably works because
the button is interposed.

Note that I only want the auto-create to be active on
the last box. I do this by calling "delete box.onblur"
and "delete box.onkeydown" on boxes as they are left.
I found that you have to use delete rather than setting
onblur and onkeydown to null, otherwise Mozilla has trouble.
Doing this may also fix the Safari problem.
Sep 27 '05 #12

P: n/a
ASM
Mark Reginald James a écrit :
ASM wrote:
it works fine in all my browsers (FF 1.07, IE 5.2, Opera 8.01)
Curiously Safari displaies 3 more inputs and jumps to therd
(I'll see that later)


I just downloaded FF 1.07 and 1.5b1 to try them out, and they
do the same as Mozilla 1.7. Tabbing from the "last input" box
goes to the new box, but tabbing from any new box goes to and
stays in the address bar. The first one probably works because
the button is interposed.


hu ... the button is to decorate ....

and ... you're right, it was too beautyfull, I also begin to get
problems and troubles
Have you your way of doing I'll can see somewhere?
--
Stephane Moriaux et son [moins] vieux Mac
Sep 27 '05 #13

P: n/a
ASM wrote:
Have you your way of doing I'll can see somewhere?


Here: http://mrj.bpa.nu/testtab.html

Source for this is:

<html>
<head>
<title>
Test of auto list form creation with tabbing
</title>
<script type="text/javascript">
function check_option_change(o) {
if (o.value.search(/\S/) != -1) {
var new_option = o.parentNode.cloneNode(true);
new_option.firstChild.value = '';
with (o) { delete onkeydown; delete onblur; }
o.parentNode.parentNode.appendChild( new_option );
return new_option;
} else
return null;
}

function check_tab(e) {
if (e.keyCode == 9) {
var me = e.target ? e.target : e.srcElement;
if (check_option_change(me) != null) me.didtab = true;
}
}

function leave_option(e) {
var me = e.target ? e.target : e.srcElement;
if (me.didtab != true) check_option_change( me );
}
</script>
</head>
<body>
<ul><li><input type="text" onblur="leave_option(event)" onkeydown="check_tab(event)"></li></ul>
</body>
</html>
Sep 27 '05 #14

P: n/a
ASM
Mark Reginald James a écrit :
ASM wrote:
Have you your way of doing I'll can see somewhere?

Here: http://mrj.bpa.nu/testtab.html


thanks

With my IE it works only once
while with FF there is no end ? ?
Source for this is:

<html>
<head>
<title>
Test of auto list form creation with tabbing
</title>
<script type="text/javascript">
function check_option_change(o) {
if (o.value.search(/\S/) != -1) {
var new_option = o.parentNode.cloneNode(true);
new_option.firstChild.value = '';
with (o) { delete onkeydown; delete onblur; }
if you delete onkeydown and onblur
why FF can yet use them in new inputs ?
o.parentNode.parentNode.appendChild( new_option );
return new_option;
} else
return null;
}

function check_tab(e) {
if (e.keyCode == 9) {
var me = e.target ? e.target : e.srcElement;
if (check_option_change(me) != null) me.didtab = true;
}
}

function leave_option(e) {
var me = e.target ? e.target : e.srcElement;
if (me.didtab != true) check_option_change( me );
}
</script>
</head>
<body>
<ul><li><input type="text" onblur="leave_option(event)"
onkeydown="check_tab(event)"></li></ul>
</body>
</html>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 27 '05 #15

P: n/a
ASM wrote:
With my IE it works only once
while with FF there is no end ? ?


Yes, just checked it on IE, and it didn't work,
even though I made this example up from my real
code that does work in both IE and FF/Mozilla!

I'll find out what I did wrong and get back to you.

function check_option_change(o) {
if (o.value.search(/\S/) != -1) {
var new_option = o.parentNode.cloneNode(true);
new_option.firstChild.value = '';
with (o) { delete onkeydown; delete onblur; }

if you delete onkeydown and onblur
why FF can yet use them in new inputs ?


The delete is done after the clone.
Sep 27 '05 #16

P: n/a
ASM
Mark Reginald James a écrit :
ASM wrote:
With my IE it works only once
while with FF there is no end ? ?

Yes, just checked it on IE, and it didn't work,


I know (or I think to know) :
during cloning IE doesn't clone javascript
probably onwhatelse have to be to re set to clone
even though I made this example up from my real
code that does work in both IE and FF/Mozilla!


so yon know how to do ?
var new_option = o.parentNode.cloneNode(true);
new_option.firstChild.value = '';
with (o) { delete onkeydown; delete onblur; }


if you delete onkeydown and onblur
why FF can yet use them in new inputs ?


The delete is done after the clone.


I've once more not correctly read :(
It's on old input you delete onwhatelse
and not those of new_option ... as I thought
--
Stephane Moriaux et son [moins] vieux Mac
Sep 27 '05 #17

P: n/a
ASM wrote:
I know (or I think to know) :
during cloning IE doesn't clone javascript
probably onwhatelse have to be to re set to clone


No, the cloning is OK. Turns out you *do* have to
null out the event functions rather than delete
them, otherwise IE has trouble.

After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.
Sep 28 '05 #18

P: n/a
ASM
Mark Reginald James a écrit :

After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.


not more

jump create only once

--
Stephane Moriaux et son [moins] vieux Mac
Sep 28 '05 #19

P: n/a
ASM
Mark Reginald James a écrit :

After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.


my IE (5.2) -> not more

create jump : only once

--
Stephane Moriaux et son [moins] vieux Mac
Sep 28 '05 #20

P: n/a
ASM wrote:
Mark Reginald James a écrit :

After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.

my IE (5.2) -> not more

create jump : only once


Oh, OK. I'm testing on WinXP IE6. Are you making
sure the box is non-blank before tabbing out?
Sep 28 '05 #21

P: n/a
ASM wrote:
Mark Reginald James a écrit :

After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.


my IE (5.2) -> not more

create jump : only once


I think the problem is that if the event functions for the box
are set to null in the check_option_change function, older IE
has a problem returning from this function and finding its way
back to an event function that is no longer linked to the object.

So I've done another version with the nulling of the event
functions done back in the functions themselves:
http://mrj.bpa.nu/testtab2.html

Could you check whether this works in IE 5.2?

If this doesn't work, a delayed nulling of the functions
would have to be done: either within a later-acting trigger,
or after a delay.

Sep 28 '05 #22

P: n/a
ASM
Mark Reginald James a écrit :
ASM wrote:
Mark Reginald James a écrit :
After changing the deletes to null assigns,
http://mrj.bpa.nu/testtab.html now works on both IE and FF.


my IE (5.2) -> not more
create jump : only once


Oh, OK. I'm testing on WinXP IE6. Are you making
sure the box is non-blank before tabbing out?


Re and re verified : yes

scripting :

function check_tab(e) {
window.status='keydown : vu ==> '+e.keyCode;

showes me, as I said, this stupidous IE (5.2 Mac)
forget to clone the onwhatyouwant !

as no more message in status bar with new input
--
Stephane Moriaux et son [moins] vieux Mac
Sep 28 '05 #23

This discussion thread is closed

Replies have been disabled for this discussion.