Shulou(Shulou.com)06/03 Report--

This article mainly introduces "onblur and onfocus events in JavaScript". In daily operation, I believe many people have doubts about onblur and onfocus events in JavaScript. Xiaobian consulted all kinds of information and sorted out simple and easy to use operation methods. I hope to help you answer the doubts of "onblur and onfocus events in JavaScript"! Next, please follow the small series to learn together!

I. onfocus

When a text box gets focus, the text inside it is automatically selected like the Baidu search input box on the "Good 123" website. Such an operation can be realized by using onfocus.

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

Please enter the URL

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

In the code, the JS statement with the onmousemove event embedded in the input tag, this.focus() after the equal sign means to get focus for itself; the sign of getting focus is that the input cursor will appear in the text box, but to make all the text in it selected, we still have to use this.select() statement, which means to select all the text in the text box.

II. onblur (loss of focus event)

We often check whether the text box has been typed correctly, usually after the user clicks the submit button. In fact, we can do this in real time when the control loses focus, so onblur events come in handy.

The following example has four text boxes. Nothing happens if you haven't clicked any of them yet, but when you click any of them to have focus (the input cursor is inside), if you don't type anything and click somewhere else to lose focus, a warning pops up. Try it

name

gender

age

address

Here is the code and explanation:

form code

name

gender

age

address

JS code

function chkvalue(txt) { if(txt.value=="") alert("Text box must be filled in! ");}

In the form code, each box code is embedded with an onblur JS statement, which calls the custom function chkvalue(this) in the JS code that follows, meaning that when the text box loses focus, the chkvalue() function is called; this chkvalue() function detects whether the text box is empty, and if it is, a warning window pops up. This function has one parameter (txt) corresponding to the parameter (this) that called the function in the previous text box, i.e. itself.

At this point, the study of "onblur and onfocus events in JavaScript" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.