form onBlur?

**warish** · 11-22-2004 07:12 PM

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

**Brandoe85** · 11-22-2004 07:48 PM

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()">

**gsb** · 11-22-2004 08:51 PM

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

**7stud** · 11-22-2004 10:03 PM

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 e = window.event; //for IE which does not send the event

    e.cancelBubble = true; //cancel bubbling in IE

    if (e.stopPropagation) e.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>

**warish** · 11-23-2004 01:42 PM

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: form onBlur?

Thread Tools

Display

form onBlur?

Thanks

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions