Does jquery trigger any event when clicking on the input?

Clicking on the input triggers the "focus event", which means that the input element is selected and can be operated, and a small vertical line flashes on the page screen. In jquery, you can use the focus() method to trigger or bind focus events to elements, using the syntax "$(selector).focus()" or "$(selector).focus(function)".

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

jquery clicks on the input to trigger the "focus focus event".

The focus is the area of ​​concern, that is, the position where the cursor is currently activated. The small vertical line flashing in the page screen indicates that a certain control on the web page is selected and can be operated. Click the mouse to get the cursor, and the Tab key can switch focus according to the set Tabindex.

For example, if an input text box gets the focus, you click the input element and you directly enter the input text box; or if a drop-down list box gets the focus, if you press the down arrow on the keyboard, it will Make the list. The program also has events that occur when focus is gained (gotfocus()), events that occur when focus is lost (lostfocus()), and a method to set focus for the control (setfocus()). Making good use of focus can make your program appear very user-friendly.

The focus event occurs when an element gains focus. An element receives focus when it is selected with a mouse click or positioned with the tab key.

jquery focus() obtains the focus event

The focus() method triggers the focus event, or specifies a function to be run when the focus event occurs.

Syntax:

//触发 focus 事件
$(selector).focus()

//将函数绑定到 focus 事件
$(selector).focus(function)

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

Sample code:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).focus(function(){
        $(this).css(&#39;border-color&#39;,&#39;red&#39;);
    });
</script>

When the mouse moves into the input and When clicked, the input element will change into the following form

jq focus() event will add a CSS style to the input

<input type="text" name="" id="mochu" style="border-color: red;">

Extended knowledge: The blur() method sets the focus loss event

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

Syntax:

//触发 blur 事件
$(selector).blur()

//将函数绑定到 blur 事件
$(selector).blur(function)

Example: After input loses focus, the content in the input box pops up

Sample code:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){ 
    alert($(this).val());    
    });
 </script>

The running result is as shown in the figure:

Use jq blur() lost focus event to verify user input

The blur() lost focus event in JQuery can be used to check the user's input input Whether the content entered in the box is legal, such as the following code, if the user enters less than five characters, a prompt will be given

Sample code:

<input type="text" name="" id="mochu">
<script>
    $(&#39;#mochu&#39;).blur(function(){
        if($(this).val().length < 5){
            alert(&#39;字数太少了，多输入几个吧&#39;);
        }
    });
</script>

[Recommended learning: jQuery video tutorial, web front-end video】

The above is the detailed content of Does jquery trigger any event when clicking on the input?. For more information, please follow other related articles on the PHP Chinese website!