Javascript Focus() - not playing friendly

S

Steve

<script language="javascript">
function setMyFocus()
{
if (document.getElementById("price").value == "xyz")
{
document.getElementById("price2").focus();
document.getElementById("price2").select();
}
}
</script>


Price <input type="text" id="price" value="xyz"
Price2 <input type="text" id="price2" value="abc"><br/>
-------------------------------------

This script does exactly what it looks like - when leaving the Price
input field, if the value is xyz, set the focus to the Price2 input
field and selects the text.

However - if I change the focus and select targets in the js portion
from price2 to price, it doesn't work. Control goes to the Desc
field.

I simply can't see what I've got wrong here. Surely this has been
done with form validation millions of times - where am I falling down?
(FF2.0.0.12, WinXP)

TIA -
- Steve
 
D

Doug Gunnoe

<script language="javascript">
function setMyFocus()
{
        if (document.getElementById("price").value == "xyz")
        {
                document.getElementById("price2").focus();
                document.getElementById("price2").select();
        }}

</script>

Price <input type="text" id="price" value="xyz"
onblur="setMyFocus();"><br/>
Desc <textarea id="dummy" rows="4" cols="40">dummy text</textarea><br/

Price2 <input type="text" id="price2" value="abc"><br/>
-------------------------------------

This script does exactly what it looks like - when leaving the Price
input field, if the value is xyz, set the focus to the Price2 input
field and selects the text.

However - if I change the focus and select targets in the js portion
from price2 to price, it doesn't work.  Control goes to the Desc
field.

I simply can't see what I've got wrong here.  Surely this has been
done with form validation millions of times - where am I falling down?
(FF2.0.0.12, WinXP)

TIA -
- Steve
Click to expand...

So you mean, you swapped 'price' and 'price2' in the JS, because you
essentially want the reverse from what you are doing to happen?

But did you change everything else that needed changing? The following
works:

<html>
<head>
<script language="javascript">
function setMyFocus()
{
if (document.getElementById("price2").value == "abc")
{
document.getElementById("price").focus();
document.getElementById("price").select();
}

}
</script>
</head>
<body>
Price2 <input type="text" id="price2" value="abc"
onblur="setMyFocus();"><br/>
</body>
</html>

Good luck!
 
S

Steve

So you mean, you swapped 'price' and 'price2' in the JS, because you
essentially want the reverse from what you are doing to happen?
Click to expand...

At the end of the day, all I'm looking to do is to add validation to
my price field. If the validation fails, I want to select the text
and set the focus to that field. But this doesn't work:

if (document.getElementById("price").value == "xyz")
{
document.getElementById("price").focus();
document.getElementById("price").select();
}

When I tab out of the price field with "xyz", focus goes on to the
text area. But rewriting the javascript as follows, I can make the
focus go to Price2:

if (document.getElementById("price").value == "xyz")
{
document.getElementById("price2").focus();
document.getElementById("price2").select();
}

I've just tried to simplify the example so I can get an understanding
as to why it won't work. I'm stuck. :(
 
P

pr

Steve said:
At the end of the day, all I'm looking to do is to add validation to
my price field. If the validation fails, I want to select the text
and set the focus to that field. But this doesn't work:

if (document.getElementById("price").value == "xyz")
{
document.getElementById("price").focus();
document.getElementById("price").select();
}

When I tab out of the price field with "xyz", focus goes on to the
text area.
Click to expand...
[...]

Whilst some consider it bad style to 'trap' a user in a text input
field, it should at least be possible to validate this way.

Unfortunately, this bug was reported to Mozilla in 2000 and hasn't been
fixed yet (<URL: https://bugzilla.mozilla.org/show_bug.cgi?id=53579>).

At least the workaround isn't too arduous. Here's a slight re-write of
your example:

Price <input type="text" id="price" value="xyz"
onblur="setMyFocus(this);"><br>
<!-- not <br/> - that would be XHTML -->

and

<script type="text/javascript"> <!-- not language -->
function setMyFocus(o) {
if (o.value == "xyz") {
window.setTimeout(function () {o.focus(); o.select();}, 0);
}
}
</script>

Note that the workaround has been around so long, it has a bug of its
own <URL: https://bugzilla.mozilla.org/show_bug.cgi?id=297134>. It would
be nice if the rise of Safari and a few more WebKit browsers finally
jolted Mozilla into fixing some of these antiques.
 

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

Script to send email not working 1
Set value after clicking in field 11
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
How to treat an input data as variable? 4
Javascript DOM 1
Only one table shows up with the information 2
Image upload not working in browser 4
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0

Members online

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

Forum statistics

Threads
473,781
Messages
2,569,615
Members
45,296
Latest member
HeikeHolli

Latest Threads

Top