jquery focus out of focus

jQuery is a scripting language that allows developers to manipulate HTML and CSS by writing JavaScript code. It provides many convenient functions and methods to help developers enhance the interactivity of Web pages. Among them, focus and defocus are a common interactive operation. This article will explain the usage and implementation of focus and defocus in jQuery.

1. Focus

In Web development, focus refers to placing the mouse or keyboard cursor on the input box or other editable element to make it the currently "active" element. , you can enter data or perform other operations. In jQuery, the focus function can be achieved through the focus() method.

Syntax: $(selector).focus()

Among them, selector represents the element that needs to be focused, which can be a selector such as id, class, label, etc. For example, to focus on the element with the id of input, you can use the following code:

$("#input").focus();

or use the following code:

$ ("input#input").focus();

Or use the following code:

$("input[id='input']").focus();

In the above code, different selector methods are used to select the elements that need to be focused, but their effects are the same.

In actual development, sometimes it is necessary to automatically focus on an element when the page is loaded. This can be achieved by using jQuery's ready() method after the page is loaded.

The code is as follows:

$(document).ready(function(){

$("#input").focus();

});

In the above code, $( document).ready() method to wait for the page to load before performing the focus operation.

2. Defocus

Contrary to focus, defocus refers to moving the mouse or keyboard cursor away from the currently focused element so that it is no longer an "active" element. Then respond to input or operation. In jQuery, out-of-focus operation can be achieved through the blur() method.

Syntax: $(selector).blur()

Among them, selector represents the element that needs to be out of focus, which can be a selector such as id, class, label, etc. For example, to defocus the element whose id is input, you can use the following code:

$("#input").blur();

or use the following code:

$("input#input").blur();

Or use the following code:

$("input[id='input']").blur();

Similarly, defocusing can also be automatically achieved when the page is loaded. It can be achieved by using jQuery's ready() method after the page is loaded.

The code is as follows:

$(document).ready(function(){

$("#input").blur();

});

3. Application examples

Below, we use an application example to demonstrate the application effects of focus and defocus.

The code is as follows:

8b05045a5be5764f313ed5b9168a17e6

100db36a723c770d327fc0aef2ce13b1

93f0f5c25f18dab9d176bd4f6de5d30e

<title>jQuery聚焦失焦</title>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<style type="text/css">

    #input{

        width: 200px;

        height: 30px;

        font-size: 16px;

    }

    #result{

        margin-top: 20px;

        font-size: 16px;

    }

</style>

<script type="text/javascript">

    $(document).ready(function(){

        $("#input").focus(function(){

            $(this).css("background-color", "#f2f2f2");

        });

        $("#input").blur(function(){

            $(this).css("background-color", "#ffffff");

        });

        $("#btn").click(function(){

            $("#result").text($("#input").val());

        });

    });

</script>

7cdffbc981ce578dc6212f54b5f55c8e

6c04bd5ca3fcae76e30b72ad730ca86d

<input type="text" id="input" placeholder="请输入信息" />

<button id="btn">获取</button>

<div id="result">聚焦失焦效果演示</div>

36cc49f0c466276486e50c850b7e4956

##73a6ac4ed44ffec12cee46588e518a5e

In the above code, a Input box and a button, the user can enter information in the input box, and the information will be displayed on the page after clicking the button. In jQuery, the focus() and blur() methods are used to achieve focus and defocus effects. When the input box gets focus, the background color will turn to gray, and when it is defocused, the background color will turn to white. At the same time, the click() method is used to implement the click event of the button, obtain the value in the input box, and display it on the page.

Through the above code, we can see that focus and defocus are a very common interactive operation and are also very commonly used in web development. jQuery provides convenient focus() and blur() methods to Implementation, developers can use them to enrich the page interaction experience and provide users with a better usage experience.

The above is the detailed content of jquery focus out of focus. For more information, please follow other related articles on the PHP Chinese website!