Home | Contact Us | FAQ | Search & Site Map | Link to Us
Sign In | Join | Other 45 Sites in Network
Home
Discussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers

Webmaster Forum / HTML, CSS, Scripts / JavaScript / March 2008


Tip: Looking for answers? Try searching our database.

Javascript Focus() - not playing friendly

Thread view: 
Enable EMail Alerts  Start New Thread
Thread rating: 
Steve - 28 Mar 2008 20:21 GMT
<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
Reply to this Message
Doug Gunnoe - 30 Mar 2008 01:15 GMT
> <script language="javascript">
> function setMyFocus()
[quoted text clipped - 28 lines]
> TIA -
> - 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?

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>
Price <input type="text" id="price" value="xyz" ><br/>
Desc <textarea id="dummy" rows="4" cols="40">dummy text</textarea><br/

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

Good luck!
Reply to this Message
Steve - 31 Mar 2008 03:28 GMT
> So you mean, you swapped 'price' and 'price2' in the JS, because you
> essentially want the reverse from what you are doing to happen?

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.  :(
Reply to this Message
pr - 31 Mar 2008 16:24 GMT
> 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
[quoted text clipped - 8 lines]
> When I tab out of the price field with "xyz", focus goes on to the
> text area.
[...]

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.
Reply to this Message
 
Sign In
Join
My Latest Posts
My Monitored Threads
My Blog
My Photo Gallery
My Profile
My Homepage
Start New Thread
Enable EMail Alerts
Rate this Thread



©2010 Advenet LLC   Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.