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

Tab and focus

P: n/a
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>

Dec 1 '05 #1
Share this Question
Share on Google+
9 Replies


P: n/a
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?

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

<URL:http://hixie.ch/advocacy/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/> ^
No _XML_ parser will care about that; it is far too late because the
document has already been parsed.
<title>Untitled Document</title>
<URL:http://www.w3.org/QA/Tips/good-titles>
</head>
<script>
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.

<URL:http://validator.w3.org/>
function checkMe(id)
{
obj = document.getElementById(id);
All methods of host objects should be feature-tested on
run-time before being called.

<URL:http://www.pointedears.de/scripts/test/whatami>, 2.
if (obj.value != "")
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";
No need for this variable.
if (obj.value != text)
if (obj.value != "abc")
{
alert("WRONG!!!")
obj.focus();
obj.select();
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>


<!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
Dec 1 '05 #2

P: n/a
Thomas 'PointedEars' Lahn wrote:
if (obj.value != "abc")
{
alert("WRONG!!!")


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
Dec 1 '05 #3

P: n/a
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?

Here is the source,

[..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).

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

Patrick Kanne - Webmaniac
petnews _AT_ quaint _DOT_ info
http://patrick.quaint.info
Dec 1 '05 #4

P: n/a
Thomas 'PointedEars' Lahn wrote:
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?

[...]
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).


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? :-)
--
Rob
Dec 1 '05 #5

P: n/a
RobG wrote:
But the OP's question is not answered - why doesn't focus, when asked,
go to the control that is supposed to receive it?
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.
It does not ignore anything here[1] on Valid markup. Which is
actually a Bad Thing, see news:39****************@PointedEars.de

[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? :-)


Pardon me?
PointedEars
Dec 1 '05 #6

P: n/a
Thomas 'PointedEars' Lahn wrote:
RobG wrote:

[...]

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

Pardon me?


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.

--
Rob
Dec 1 '05 #7

P: n/a
RobG wrote:
Thomas 'PointedEars' Lahn wrote:
RobG wrote:
[alert() fires blur event for form controls]
Riddle me that Thomas - or should I be downloading Firefox 1.5? :-)

Pardon me?


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


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
Dec 1 '05 #8

P: n/a
Thomas 'PointedEars' Lahn wrote:
RobG wrote:

Thomas 'PointedEars' Lahn wrote:
RobG wrote:

>[alert() fires blur event for form controls]

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

Pardon me?


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

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


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.
--
Rob
Dec 1 '05 #9

P: n/a
setTimeout() works...
I will use that then....

Thanks a lot.... :)

Dec 2 '05 #10

This discussion thread is closed

Replies have been disabled for this discussion.