Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Aug 2004
    Location
    Saint Peters, Missouri, USA
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    onBlur...focus() works only sometimes

    Hi all,

    When I validate in the <form return onSubmit="submitTest();"... focus() works fine.

    Same with the <body onload="loader()"...

    Same with the onClick="javascript: document.foo.text1.select(); document.foo.text1.focus()">. All the above works as expected.

    But when I try to validate upon leaving a textbox, using onBlur, the alert works (when value.length == 0), but the focus still jumps on to the next object.

    Using Netscape 7.x, how do I get the focus to remain on the textbox if the entry was bogus???

    Code:

    <script type="text/javascript">
    // --------< loader fn
    function loader() {
    window.status="I'm in the function Loader";
    document.getElementById('text1').value = "Start";
    document.getElementById('text1').select();
    document.getElementById('text1').focus();
    }// ---------------------------------------------------

    function validText1(element) {
    if (element.value.length == 0) {
    alert("You need to type something into TextBox One");
    document.getElementById("text1").focus();
    return false;
    }
    }

    function validText2(element) {
    if (element.value.length == 0) {
    alert("You need to type something into TextBox Two");
    document.getElementById("text2").focus();
    return false;
    }
    }

    function submitTest() {
    if (document.foo.text1.value == "test") {
    alert("Type something besides the word test in TextBox1");
    document.foo.text1.focus();
    document.foo.text1.select();
    }
    return false //always 'false' because there's no followup form
    }
    }


    // -->
    </script>
    </head>

    <body onload="loader()" bgcolor="#FFFFFF" text="#000000">

    <p>&nbsp;</p>

    <form name="foo" return onSubmit="submitTest();"><div align="center">
    Enter up to eight characters in TextBox One
    <input type="text" id="text1" name="text1" maxlength="8" size="10"
    onBlur="return validText1(this)">
    <br />
    Enter up to eight characters in TextBox Two
    <input type="text" id="text2" name="text2" maxlength="8" size="10"
    onBlur="return validText2(this)">
    <p>&nbsp;</p>
    <input type="button" name=button1" value="Focus on TextBox One"
    onClick="javascript: document.foo.text1.select(); document.foo.text1.focus()">
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" id="submit" name="submit" value="Submit">

    </div>
    </form>


    </body>
    </html>

  • #2
    Senior Coder A1ien51's Avatar
    Join Date
    Jun 2002
    Location
    Between DC and Baltimore In a Cave
    Posts
    2,717
    Thanks
    1
    Thanked 94 Times in 88 Posts
    try removing the return false from the function and see if that works.

    Eric
    Tech Author [Ajax In Action, JavaScript: Visual Blueprint]

  • #3
    New Coder
    Join Date
    Aug 2004
    Location
    Saint Peters, Missouri, USA
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    flakey onBlur and focus()

    I pulled the return false from the validText#() functions
    and the corresponding return from the onBlur calls...

    and still the focus jumps to the next object.

    I've searched all sorts of javascript forums ( even saw questions similar to mine, but they remained unanswered )

    Is this something that jst won't work in Netscape???

    Thanx for the reply, A1ien51... I'll try just about anything.

    anyone else have a suggestion?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,252
    Thanks
    203
    Thanked 2,557 Times in 2,535 Posts
    Change document.getElementById("text1").focus();

    to document.getElementById("text1").select();

  • #5
    New Coder
    Join Date
    Aug 2004
    Location
    Saint Peters, Missouri, USA
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Philip M, thanx, but...

    ... replacing focus() with select() doesn't make a lick o' difference. (At least not in IE 6.0 or Netscape 7.1).

    In my brief code snippet, I can get focus() to work correctly with the onload, the onSubmit(), and even in the onClick; but danged if I can put the focus back into the textbox that launched the onBlur handler.

    Is this just impossible? Is there a document somewhere (like at W3C) to support this impossibility?

    Thanx again, Philip M. I appreciate your effort & reply.

    I'm still 'quandry-fied'... Help!

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since you already have a value in text1 just use an onchage event handler...

    And you could have warned someone that if they ran those codes they would be stuck in an endless loop of alerts...

    This is the second time today that I have had to escape by closing the process in my task manager and losing all of my open windows....

    .....Willy

  • #7
    New Coder
    Join Date
    Aug 2004
    Location
    Saint Peters, Missouri, USA
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Whoops... don't know why

    Willy, honestly, I wouldn't knowingly post code that falls into an unending loop. That code doesn't do that on my computilator.

    Regarding the onChange handler, that's only fired if the value is changed; but, like with many forms, the text value may be initially blank... and I'm trying to notify the user (with the focus on the object at hand, not the next in the tab sequence), that he/she can't go past a blank field.

    Although it will catch the blank textbox with the onSubmit; and the focus will reliably be on the desired textbox, I'd rather not wait all the way until form validation, i.e., onSubmit.

    The issue here isn't so much whether a field is blank or not, as it is about leaving a field containing any sort of bogus value. And, informing the user that the value is bogus; and, conveniently having focus in the field with the bogus value (blank or otherwise).

    I think I've discovered a workaround in IE6, but it doesn't fly in NN7.

    Again, sorry for any difficulty I may have caused you; but, thank you for your effort & reply. Any other ideas utilizing 'onBlur' and 'focus()'?

  • #8
    New to the CF scene
    Join Date
    Apr 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Macintosh Solution to your problem, better late then never

    I figure you have moved on by now, so I'm posting this for people like me, who searched for 2 hours and didn't find anything. I came up with this and it turns out the solution is simple once you hear it. You use a timer and a call back. While you would logically think that returning false on an onblur would prevent the blur, it doesn't. It also seems that you can't change the element in focus in javascript while the browser is in the process of a focus change. Wordy I know but the punchline is if you use a timer and a call back you can break out of the focus change event stack and the timer event will fire just after the focus processes snapping the focus back to the element you select. Code example follows. I hope someone finds this useful.

    Kendrick

    <html>
    <head>

    <script type="text/javascript">

    function onblur_eventHandler(evt){
    var sourceElement;
    var eventType;

    if(window.event){ // IE
    sourceElement= window.event.srcElement;
    eventType= window.event.type;
    }else{ // GOOD BROWSER
    sourceElement= evt.target;
    eventType= evt.type;
    }

    validateField(sourceElement)
    }

    var badElement;

    function validateField(sourceElement){

    // validate the change however you want
    // for the example i'm just using the name of the field

    if(sourceElement.name == "badInput"){
    badElement= sourceElement;
    setTimeout("refocusBadElement()",10); // if you make the 10 value big you can watch the callback happen
    }
    }


    function refocusBadElement(){
    badElement.focus();
    }

    </script>
    </head>
    <body>

    <form>
    <input name="goodInput" type="text" value="good" onblur="onblur_eventHandler(event)">
    <input name="badInput" type="text" value="bad" onblur="onblur_eventHandler(event)">
    </form>

    </body>
    </html>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •