Controlling tab order with JavaScript

  • Thread starter Mark Reginald James
  • Start date
M

Mark Reginald James

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>
 
R

Randy Webb

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.
Click to expand...

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/interact/forms.html#adef-tabindex >

Problem solved.
 
M

Mark Reginald James

Randy said:
Mark Reginald James said the following on 9/24/2005 2:28 PM:



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/interact/forms.html#adef-tabindex >

Problem solved.
Click to expand...

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

Mark Reginald James

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.
 
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.
Click to expand...

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')){focus();select();}" />
<b>input 1 : </b><input type="text" id="i_b2"
onblur="with(document.getElementById('i_b1')){focus();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>
 
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,
Click to expand...

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.
Click to expand...

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.
Click to expand...

onblur would have to be enough ... no?
 
M

Mark Reginald James

ASM said:
Now we have creation of a new text-field on the fly ?
Click to expand...

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.
do not undertsand ... onblur without keydown
how make you that working ?
Click to expand...

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.
onblur would have to be enough ... no?
Click to expand...

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

Mark Reginald James

ASM said:
Mark Reginald James a écrit :



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')){focus();select();}" />
<b>input 1 : </b><input type="text" id="i_b2"
onblur="with(document.getElementById('i_b1')){focus();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>
Click to expand...

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.
 
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.
Click to expand...

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>
 
M

Mark Reginald James

ASM said:
if it is not too late :
Click to expand...

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

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

ASM

Mark Reginald James a écrit :
No, thanks Stephane for having another look.



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.
Click to expand...

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
 
M

Mark Reginald James

ASM said:
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);
}
}
Click to expand...

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

ASM

Mark Reginald James a écrit :
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.
Click to expand...

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?
 
M

Mark Reginald James

ASM said:
Have you your way of doing I'll can see somewhere?
Click to expand...

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>
 
A

ASM

Mark Reginald James a écrit :
Here: http://mrj.bpa.nu/testtab.html
Click to expand...

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; }
Click to expand...

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

Mark Reginald James

ASM said:
With my IE it works only once
while with FF there is no end ? ?
Click to expand...

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.

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

The delete is done after the clone.
 
A

ASM

Mark Reginald James a écrit :
Yes, just checked it on IE, and it didn't work,
Click to expand...

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!
Click to expand...

so yon know how to do ?
The delete is done after the clone.
Click to expand...

I've once more not correctly read :(
It's on old input you delete onwhatelse
and not those of new_option ... as I thought
 
M

Mark Reginald James

ASM said:
I know (or I think to know) :
during cloning IE doesn't clone javascript
probably onwhatelse have to be to re set to clone
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Check forms With JavaScript 1
In javascript, XML File Create, File Save 2
Javascript DOM 1
Only one table shows up with the information 2
JavaScript code not working!! 6
Canvas drawing HTML Javascript on elementor 1
Help me sort out this script 1
Uhhhhh, What can I do next? 6

Members online

No members online now.
Total: 29 (members: 0, guests: 29)
Robots: 453

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top