www.webdeveloper.com
Results 1 to 5 of 5

Thread: form onBlur?

  1. #1
    Join Date
    Nov 2004
    Posts
    3

    form onBlur?

    I have a form with two text fields and a button. How can I tell when the user has clicked on to the document and not one of these three objects? I want to be able to put the focus back on the first text field when this happens.

    Thanks,

    Warren

  2. #2
    Join Date
    Nov 2004
    Posts
    50
    The <form> tag does not have an onBlur event handler, maybe you can try putting a onClick event on the <body> tag:
    Code:
    <body onClick="document.formname.fieldname.focus()">

  3. #3
    Join Date
    Jun 2003
    Posts
    54
    Here. Try something like this.
    Code:
    <HTML>
    <HEAD>
    <script language="JavaScript" type="text/javascript">var calcWin=null;
    var tid=null;
    function delayedFocus() { clearTimeout(tid); tid=setTimeout('window.document.aForm.aField.focus()',20); }
    function delayedCancel() { setTimeout('cancelTimer()',10); }
    function cancelTimer() { clearTimeout(tid); tid=null; }
    if(document.layers) {
        window.captureEvents(Event.FOCUS);
        window.onfocus=function(evt) {
            delayedFocus();
            routeEvent(evt);
        };
    } else window.onfocus=delayedFocus;
    </script>
    </HEAD>
    <BODY>
    <FORM NAME="aForm">
    <INPUT TYPE="text" NAME="aField" onFocus="delayedCancel();" onBlur="delayedFocus();"><br>
    <INPUT TYPE="text" NAME="bField" onFocus="delayedCancel();" onBlur="delayedFocus();"><br>
    <INPUT TYPE="button" value="Click Here" onClick="alert('Ok. Now what?');">
    </FORM>
    </BODY>
    </HTML>
    gsb

  4. #4
    Join Date
    Oct 2004
    Posts
    1,118
    When you click on one of your html form elements, the onclick event for that element fires, but the event also 'bubbles' up to the document level causing an onclick event in the document to fire as well. That means two onclick events occur when you click on one of your form elements: one for the element and one for the document. You can easily observe that 'bubbling' phenomenon by putting an alert() in their onclick event handlers.

    The problem is: you can't distinguish between an onclick event that has bubbled up from one of your elements and reaches the document, and an onclick event that originated in the document. That means just setting the focus() when the document's onclick event fires will end up setting the focus() when you click on one of the form elements--yet you only want to set the focus() when the document is clicked. Therefore, you have to cancel event 'bubbling' when a user clicks on one of your elements. Then, the only time an onclick event will fire for the document is when the user clicks on the document. Try this:
    PHP Code:
    <!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" 
      
    xml:lang="en" lang="en">
    <
    head>
    <
    title>html and javascript</title>
    <
    script type="text/javascript" language="javascript">
    <!-- 
    Hide from browsers without javascript

    //Assign event handler functions to the event after the page 
    //loads.  You have to wait until after the page loads, so that when 
    //you refer to the html elements they exist:
    window.onload=function()
    {
        
    document.onclick set_focus;
        
    document.getElementById("tb0").onclick set_focus;
        
    document.getElementById("tb1").onclick set_focus;
        
    document.getElementById("b1").onclick set_focus;
    };


    //w3c and NN browsers automatically send the event as 
    //an argument to an event handler function, which I am catching and storing
    //in 'e':
    function set_focus(e)
    {
        
    //Keep the event from 'bubbling' up to the document:
        
    if (!e) var window.event//for IE which does not send the event
        
    e.cancelBubble true//cancel bubbling in IE
        
    if (e.stopPropagatione.stopPropagation(); //cancel bubbling for w3c browsers
        
        //Because the event handler function was 'registered' with the event,
        //rather than being inserted inline in the html, inside an event handler
        //function the 'this' keyword refers to the html element that was clicked:
        
    if (this==document)
            
    document.getElementById("tb0").focus();
        
    }

    // End hiding -->
    </script>
    </head>
    <body>


    <form name="f" method="post" action="">
        <input type="text" [color="red"]id[/color]="tb0" />
        <input type="text" [color="red"]id[/color]="tb1" />
        <input type="button" [color="red"]id[/color]="b1" value="click" />
    </form>

    </body>
    </html> 
    Last edited by 7stud; 11-22-2004 at 11:29 PM.

  5. #5
    Join Date
    Nov 2004
    Posts
    3

    Thanks

    Thanks everyone, I will try all three examples and see which one works best. I did not expect such a response, I will definitely post to this newsgroup again.

    Warren

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles