Tab and focus

F

fidodido

If in the textarea (textarea3), the value is not "abc", and the user
uses "Tab" to go to the next textarea (textarea4), it will alert an
error message...and the focus will return to the textarea (textarea3)
again...
It works in Internet Explorer, however in firefox it does not work?
Anyway have any ideas why & how?

Here is the source,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
</head>
<script>
function checkMe(id)
{
obj = document.getElementById(id);
if (obj.value != "")
{
var text = "abc";
if (obj.value != text)
{
alert("WRONG!!!")
obj.focus();
obj.select();
}
}
}
</script>
<body>
<table width="200" border="0">
<tr>
<td><textarea id="textarea3" name="textarea3"
onblur="checkMe('textarea3')"></textarea>
</td>
<td><textarea id="textarea4" name="textarea4"
onblur="checkMe('textarea4')"></textarea></td>
</tr>
</table>
</body>
 
T

Thomas 'PointedEars' Lahn

fidodido said:
If in the textarea (textarea3), the value is not "abc", and the user
uses "Tab" to go to the next textarea (textarea4), it will alert an
error message...and the focus will return to the textarea (textarea3)
again...
It works in Internet Explorer, however in firefox it does not work?
Anyway have any ideas why & how?

Here is the source,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Click to expand...

IE does not support XHTML (application/xhtml+xml) at all. Sending XHTML as
text/html is harmful; XHTML 1.0 Appendix C is informative, not normative.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
Click to expand...
^
No _XML_ parser will care about that; it is far too late because the
document has already been parsed.
<title>Untitled Document</title>
Click to expand...

</head>
<script>
Click to expand...

This is neither Valid HTML nor Valid XHTML. The `script' element, which
requires a `type' attribute value, must be child element of the `head'
or the `body' element. Non-conforming UAs like IE ignore that, Firefox
probably does not.

function checkMe(id)
{
obj = document.getElementById(id);
Click to expand...

All methods of host objects should be feature-tested on
run-time before being called.

if (obj.value != "")
Click to expand...

getElementById() returns either an object reference, null
or something undefined. It never returns the empty string,
and both {} != "" and null != "", so the condition will be
always true (read: is completely useless).

<URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-getElBId>

Furthermore, there is no need for gEBI here.
{
var text = "abc";
Click to expand...

No need for this variable.
if (obj.value != text)
Click to expand...

if (obj.value != "abc")
{
alert("WRONG!!!")
obj.focus();
obj.select();
Click to expand...

Again neither method of the host environment is feature-tested before
called.
}
}
}
</script>
<body>
<table width="200" border="0">
<tr>
<td><textarea id="textarea3" name="textarea3"
onblur="checkMe('textarea3')"></textarea>
</td>
<td><textarea id="textarea4" name="textarea4"
onblur="checkMe('textarea4')"></textarea></td>
</tr>
</table>
</body>
Click to expand...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<title>...</title>

<script type="text/javascript">
function isMethodType(s)
{
return (s == "function" || s == "object");
}

function checkMe(o)
{
if (o)
{
if (o.value != "abc")
{
alert("Wrong!");

if (isMethodType(typeof o.focus))
{
o.focus();
}

if (isMethodType(typeof o.select))
{
o.select();
}
}
}
}
</script>
</head>

<body>
<table border="0">
<tr>
<td><textarea name="textarea3" rows="23" cols="42"
onblur="checkMe(this)"></textarea></td>
<td><textarea name="textarea4" rows="23" cols="42"
onblur="checkMe(this)"></textarea></td>
</tr>
</table>
</body>
</html>

(Perhaps the `table' element is not appropriate here -- is it really
tabular data? --, you should consider CSS for layout.)

However, being controlled this way can be unnerving for the user. If
there is a `form' element to be submitted, it is usually sufficient to
check on submit; if that does not apply or suffice here, you should
use means different from alert() to notify the user, perhaps the value
of a third form control without name (so that its name and value are
not submitted).


PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
if (obj.value != "abc")
Click to expand...

CAUTION: In my Firefox 1.0.7/Linux, alert() removes focus from the calling
window, hence from the target `textarea' element which fires the `blur'
event and so results in the execution of alert() again -- causing _another_
alert window. This also happens every time focus is tried to be moved away
from the calling window to other application windows (like the compose
window of the newsreader I am using now).

The only way to break this deadlock is to kill the browser process!


PointedEars
 
R

RobG

Thomas said:
fidodido wrote:

If in the textarea (textarea3), the value is not "abc", and the user
uses "Tab" to go to the next textarea (textarea4), it will alert an
error message...and the focus will return to the textarea (textarea3)
again...
It works in Internet Explorer, however in firefox it does not work?
Anyway have any ideas why & how?
Click to expand...
[...]

However, being controlled this way can be unnerving for the user. If
there is a `form' element to be submitted, it is usually sufficient to
check on submit; if that does not apply or suffice here, you should
use means different from alert() to notify the user, perhaps the value
of a third form control without name (so that its name and value are
not submitted).
Click to expand...

Agree completely.

But the OP's question is not answered - why doesn't focus, when asked,
go to the control that is supposed to receive it? Use a button to
command the pesky focus and it obeys, but have it told what to do onblur
and it ignores the request.

The use of setTimeout 'fixes' the behaviour, but at the cost of a rather
ugly kludge:


...
if (isMethodType(typeof o.focus))
{
setTimeout(function(){o.focus();}, 0);
}
...


Riddle me that Thomas - or should I be downloading Firefox 1.5? :)
 
T

Thomas 'PointedEars' Lahn

RobG said:
But the OP's question is not answered - why doesn't focus, when asked,
go to the control that is supposed to receive it?
Click to expand...

It does here.
Use a button to command the pesky focus and it obeys, but
have it told what to do onblur and it ignores the request.
Click to expand...

It does not ignore anything here[1] on Valid markup. Which is
actually a Bad Thing, see
[1] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050922
Firefox/1.0.7 (Debian package 1.0.7-1) Mnenhy/0.7.2.0
The use of setTimeout 'fixes' the behaviour, but at the cost of a rather
ugly kludge:

...
if (isMethodType(typeof o.focus))
{
setTimeout(function(){o.focus();}, 0);
}
...

Riddle me that Thomas - or should I be downloading Firefox 1.5? :)
Click to expand...

Pardon me?


PointedEars
 
P

Patrick Kanne

fidodido wrote:
Click to expand...
If in the textarea (textarea3), the value is not "abc", and the user
uses "Tab" to go to the next textarea (textarea4), it will alert an
error message...and the focus will return to the textarea (textarea3)
again...
It works in Internet Explorer, however in firefox it does not work?
Anyway have any ideas why & how?

Here is the source,
Click to expand...
[..snip..]

on which PointedEars replied:

However, being controlled this way can be unnerving for the user. If
there is a `form' element to be submitted, it is usually sufficient to
check on submit; if that does not apply or suffice here, you should
use means different from alert() to notify the user, perhaps the value
of a third form control without name (so that its name and value are
not submitted).
Click to expand...


I vehemently agree with PointedEars here: forcing a users action in this way
is really obnoxious. From an interaction-design POV this is a serious fault
and the user experience will suffer greatly. In plain language: your users
will hate you.

You might want to consider this:
if user tabs away from field without a valid entry change the color/look of
the formfield to draw attention to it. In the mean time you could disable
the submit button untill the appropriate data is filled in. Do however
notify the user that valid data is needed to enable the submit button. For
instance by using another, readonly, formfield that displays the
errormessage in stead of an alert..

(yeah, I know, not really scripting-help but I thought I'd bring this up
regardless..)


Patrick.
 
R

RobG

Thomas said:
RobG wrote: [...]
Riddle me that Thomas - or should I be downloading Firefox 1.5? :)
Click to expand...


Pardon me?
Click to expand...

For me, the alert is presented and when cleared, the focus moves on
(Firefox 1.0.7 on Windows XP Pro SP1).

I just download Firefox 1.5 and got the same result.
 
T

Thomas 'PointedEars' Lahn

RobG said:
Thomas said:
RobG said:
[alert() fires blur event for form controls]
Riddle me that Thomas - or should I be downloading Firefox 1.5? :)
Click to expand...
Pardon me?
Click to expand...

For me, the alert is presented and when cleared, the focus moves on
(Firefox 1.0.7 on Windows XP Pro SP1).
Click to expand...

Interesting. It appears that the behavior depends on the window manager or
window framework used. So that approach cannot be recommended for the Web.


PointedEars
 
R

RobG

Thomas said:
RobG wrote:

Thomas said:
RobG wrote:

[alert() fires blur event for form controls]

Riddle me that Thomas - or should I be downloading Firefox 1.5? :)

Pardon me?
Click to expand...

For me, the alert is presented and when cleared, the focus moves on
(Firefox 1.0.7 on Windows XP Pro SP1).
Click to expand...


Interesting. It appears that the behavior depends on the window manager or
window framework used. So that approach cannot be recommended for the Web.
Click to expand...

It's a reported bug.

<URL: https://bugzilla.mozilla.org/show_bug.cgi?id=312466 >


Sorry about the delay in responding, I accidentally posted it as a
response to another thread.
 

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

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Script to send email not working 1
Bootstrap contact form not working 2
Filename undefined for Blob ? 1
Javascript DOM 1
Sort by number of characters 1
How to wrap <td> content . 16
Image shifts to the right when export the page to pdf 4

Members online

No members online now.
Total: 318 (members: 0, guests: 318)
Robots: 384

Forum statistics

Threads
474,430
Messages
2,571,676
Members
48,796
Latest member
Greg L.

Latest Threads

Top