onblur and onfocus events in Js (graphic tutorial)

In html pages, visual elements such as buttons and text boxes have events that have and lose focus. These events can trigger preset operations in response to mouse or keyboard actions. This article briefly explains the application of onfocus and onblur by taking the text box gaining and losing focus as an example.

1. onfocus (get focus event)

When a text box gets focus, all the text in it is automatically selected like the Baidu search input box on the "Hao123" website , such an operation can be achieved using onfocus.

In the following text box, when the mouse pointer moves over, all the text inside is selected:

Please enter the URL

How to do this? Look at the following code and explanation:

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

In the code, the JS statement of the onmousemove (mouse pointer passing) event is embedded in the input tag. The this.focus() after the equal sign means that it gets the focus; gets The sign of focus is that the input cursor will appear in the text box, but in order to select all the text in it, we have to use this.select() statement, which means to select all the text in the text box.

2. onblur (lost focus event)

We often detect whether the text box has been entered correctly. The detection is usually performed after the user clicks the submit button. In fact, using the control to lose When the focus is on, we can perform this detection work in real time. In this case, the onblur event comes in handy.

The following example has four text boxes. If there is no click on any of them, nothing will happen. However, when you click on any of them, it will have it. has the focus (the input cursor is inside), if you input nothing and click somewhere else to cause it to lose focus, a warning will pop up. Try it

Name

gender

Age

Address

The following is the code and explanation:

Form code

<form name="blur_test">
   <p>姓名 <input type="text" name="name"value="" size="30"onblur="chkvalue(this)"><br>
    性别 <inputtype="text" name="sex" value=""size="30" onblur="chkvalue(this)"><br>
    年龄 <inputtype="text" name="age" value=""size="30" onblur="chkvalue(this)"><br>
    住址 <inputtype="text" name="addr" value=""size="30" onblur="chkvalue(this)"></p>
</form>

JS code

<scriptlanguage="javascript">
function chkvalue(txt) {
   if(txt.value=="") alert("文本框里必须填写内容!");
}
</script>

Form code Here, the code of each box is embedded with an onblur JS statement, and they all call 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 checks 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, which is itself.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Code detailed explanation of how JavaScript implements quick sort

How JavaScript implements bubble sort in an encapsulated manner

Detailed explanation of JavaScript operating mechanism and conceptual analysis

The above is the detailed content of onblur and onfocus events in Js (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!