Detailed explanation of JavaScript onblur and onfocus events

In HTML pages, visual elements such as buttons and text boxes have events for having and losing focus, which can trigger preset operations in response to mouse or keyboard actions. This article uses the example of a text box gaining and losing focus to briefly explain the application of onfocus and onblur.

1. onfocus (get focus event)

When a text box gets the focus, all the text in it will be automatically selected just like the Baidu search input box on the "hao123" website. This operation can be achieved using onfocus.

When you move the mouse pointer over the following text box, all the text inside is selected:

Please enter the URL

How is this done? See the following code and explanation:

<input type="text" name="url" value="http://www.gxblk.com" size="30" usemean="this.focus();this.select();">

In the code, the input tag embeds a JS statement for the onmousemove (mouse pointer passes over) event. The this.focus() after the equal sign means that it gets the focus. The sign of getting the focus is that the input cursor will appear in the text box, but to select all the text in it, we have to use the this.select() statement, which means selecting all the text in the text box.

2. onblur (loss of focus event)

We often check whether the text box has been correctly entered. The detection is usually performed after the user clicks the submit button. In fact, when the control loses focus, we can perform this detection in real time. In this case, the onblur event comes in handy.

The following example has four text boxes. If you haven't clicked any of them, nothing will happen. However, when you click any of them to give it focus (the input cursor is in it), if nothing is entered and you click somewhere else to make it lose focus, a warning will pop up. Try it.

Name

gender

age

address

Here is the code and explanation:

Form Code

<form name="blur_test">

   <p>Name<input type="text" name="name"value="" size="30"οnblur="chkvalue(this)"><br>

    Gender<inputtype="text" name="sex" value=""size="30" οnblur="chkvalue(this)"><br>

    Age<inputtype="text" name="age" value=""size="30" οnblur="chkvalue(this)"><br>

    Address<inputtype="text" name="addr" value=""size="30" οnblur="chkvalue(this)"></p>

</form>

JS code

<scriptlanguage="javascript">
function chkvalue(txt) {
   if(txt.value=="") alert("The text box must be filled in!");

}
</script>

In the form code, each box code is embedded with an onblur JS statement, which calls the custom function chkvalue(this) in the following JS code, which means that when the text box loses focus, the chkvalue() function is called; this chkvalue() function detects whether the text box is empty, and if so, a warning window pops up. This function has one parameter (txt), which corresponds to the parameter (this) used by the previous text box to call the function, that is, itself.

This is the end of this article about the detailed explanation of JavaScript onblur and onfocus events. For more relevant js onblur and onfocus event content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!