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

This article introduces the knowledge of "how jquery gains and loses focus". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

In jquery, you can use the focus () method to get the focus event, the syntax "$(selector) .focus ()", and the syntax "$(selector) .blur ()" to lose the focus event using the blur () method.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

If there are some form elements in the front-end site for users to fill in, we can use JQ to get focus events and lose focus events to give users some prompts. Today we will talk about the use of events that gain focus and lose focus under JQuery.

Jquery focus () gets the focus event

The focus () method: when you select an element with a mouse click or navigate to it with the tab key, the element gets focus.

Syntax:

(selector) .focus ()

Copy

Example: input input box changes the color of its border when it gets focus

Sample code:

$('# mochu') .focus (function () {$(this) .css ('border-color','red');})

Copy

When the mouse is moved into the input and clicked, the input element changes to the following form

The jq focus () event, which adds a CSS style to input

Copy

Jquery blur () lose focus event

The blur () method: a blur event occurs when an element loses focus

Syntax:

(selector) .blur ()

Copy

Example: after input loses focus, the contents of the input box pop up

Sample code:

$('# mochu') .blur (function () {alert ($(this). Val ());})

Copy

The running result is shown in the figure:

Use jq blur () lose focus event to validate user input

The blur () loss of focus event in JQuery can be used to check whether what the user typed in the input input box is valid, such as the following code, which gives a prompt if the user enters less than five characters

Sample code:

$('# mochu') .blur (function () {if ($(this). Val (). Length < 5) {alert ('too few words, enter a few more');}}); that's all for "how jquery gets and loses focus". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.