How to control the tab key within onBlur

01-26-2006

In my example the focus should only jump to textbox2 when you press the tab
key if '11' is in textbox1. If the value of textbox1 is not '11' than the
focus should be set back to textbox1. That works great in IE but in Mozilla
the cursor always jumps to textbox2 if you press the tab key even if the
value is not '11'.

<html>
<body>
<script type = 'text/javascript'>

function test(object) {
if (object.value == 11) {
return (true);
}
else {
return (false);
}
}

</script>
<form name = "my_form" action = "" method = "post" accept-charset =
"iso-8859-1">
<table id = "my_table" border = "1">
<tr>
<td>
<input type = "text" name = "my_textbox1" onBlur = 'if
(!test(document.my_form.my_textbox1))
{document.my_form.my_textbox1.focus();}'>
<input type = "text" name = "my_textbox2">
</td>
</tr>
</table>
</form>
</body>
</html>

What do I do wrong?
Stefan

01-27-2006

Stefan Mueller wrote:
> In my example the focus should only jump to textbox2 when you press the tab
> key if '11' is in textbox1. If the value of textbox1 is not '11' than the
> focus should be set back to textbox1. That works great in IE but in Mozilla
> the cursor always jumps to textbox2 if you press the tab key even if the
> value is not '11'.
>
> <html>
> <body>
> <script type = 'text/javascript'>
>
> function test(object) {
> if (object.value == 11) {
> return (true);
> }
> else {
> return (false);
> }
> }
>
> </script>
> <form name = "my_form" action = "" method = "post" accept-charset =
> "iso-8859-1">
> <table id = "my_table" border = "1">
> <tr>
> <td>
> <input type = "text" name = "my_textbox1" onBlur = 'if
> (!test(document.my_form.my_textbox1))
> {document.my_form.my_textbox1.focus();}'>
> <input type = "text" name = "my_textbox2">
> </td>
> </tr>
> </table>
> </form>
> </body>
> </html>
>
> What do I do wrong?
> Stefan

You do nothing wrong. Firefox has it all wrong.
It's a nasty bug that persists since the beginning.

Try this workaround:
change
document.my_form.my_textbox1.focus();
with
setTimeout("document.my_form.my_textbox1.focus();" ,1);

I think FF executes all the code on the onblur event and then sets the
focus on the new object, so it's something like:
select.onblur occures, it executes the function, sets the focus back to
the control and after that the onfocus of the newly focused object gets
triggered and it all happens in a singel process or something.
You simply delay the execution and it makes me wonder who has the bug,
IE or FF.
Anyway, it should work

Hope it helps.

01-27-2006

> Try this workaround:
> change
> document.my_form.my_textbox1.focus();
> with
> setTimeout("document.my_form.my_textbox1.focus();" ,1);

Great, this works perfect.

Many thanks
Stefan

01-28-2006

impaler wrote:

> Stefan Mueller wrote:
>> In my example the focus should only jump to textbox2 when you press the
>> tab key if '11' is in textbox1. If the value of textbox1 is not '11' than
>> the focus should be set back to textbox1. That works great in IE but in
>> Mozilla the cursor always jumps to textbox2 if you press the tab key even
>> if the value is not '11'.
>> [...]
>> * function test(object) {
>> * * if (object.value == 11) {

Values of form controls are strings; this comparison works because of
implicit type conversion. Therefore, "11.000", "0x0B" and "0x0b" also
equal (`=='), but not strictly equal (`==='), 11. Unless this behavior
is wanted, it should be

if (object.value == "11") {

>> * * * return (true);
>> * * }
>> * * else {
>> * * * return (false);
>> * * }
>> * }
>> * * * <form name = "my_form" action = "" method = "post" accept-charset =
>> "iso-8859-1">
>> [...]
>> <input type = "text" name = "my_textbox1" onBlur = 'if
>> (!test(document.my_form.my_textbox1))
>> {document.my_form.my_textbox1.focus();}'>
>> <input type = "text" name = "my_textbox2">
>> [...]
>> </form>
>> [...]
>> What do I do wrong?
>> [...]

Please trim your quotes.

> You do nothing wrong. Firefox has it all wrong.
> It's a nasty bug that persists since the beginning.

It is not a bug. The `blur' event occurs when an element loses focus
(read: is about to lose focus), not when it has lost focus already.

<URL:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents>

> Try this workaround:
> change
> document.my_form.my_textbox1.focus();
> with
> setTimeout("document.my_form.my_textbox1.focus();" ,1);

Eeek. The solution to prevent keyboard navigation in this case is, of
course, to cancel the keyboard event if the key pressed was the tab key
and test() returned `false'.

<input ... onkeydown="return test(this) || (event.keyCode != 9);">

WFM in Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.

Gecko/20060110
Debian/1.5.dfsg-4 Firefox/1.5 Mnenhy/0.7.3.0.

However, this is not a Good Thing. Form data validity must not depend
entirely on DOM scripting, server-side testing is required. As for
form validation, it is better to do it before the form is submitted.

PointedEars

01-28-2006

Many thanks for your additional information.

Stefan

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Re: How include a large array?	Edward A. Falk	C Programming	1	04-04-2013 08:07 PM
How can I capture tab key event and cancel default action of Tab key?	HopfZ	Javascript	0	01-08-2007 10:04 PM
How to control the tab key with onBlur	Stefan Mueller	HTML	0	01-26-2006 11:26 PM
Does the tab key override the onblur event?	Rithish Saralaya	Javascript	2	11-04-2004 01:06 PM
Replace Tab Key to Return Key (Enter Key) from Web Forms?	M P	ASP General	1	08-06-2004 08:32 AM