Does jquery trigger any event when clicking on the input?

青灯夜游
Release: 2022-11-02 18:27:35
Original
1943 people have browsed it

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)".

Does jquery trigger any event when clicking on the input?

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.

Does jquery trigger any event when clicking on the input?

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)
Copy after login

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>
Copy after login

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

Does jquery trigger any event when clicking on the input?

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

<input type="text" name="" id="mochu"   style="max-width:90%">
Copy after login

Does jquery trigger any event when clicking on the input?

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)
Copy after login

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>
Copy after login

The running result is as shown in the figure:

Does jquery trigger any event when clicking on the input?

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>
Copy after login

Does jquery trigger any event when clicking on the input?

[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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template