Explore the practical uses of jQuery focus events-JS Tutorial-php.cn

Explore the practical uses of jQuery focus events

PHPz

Release： 2024-02-26 18:12:24

Original

1127 people have browsed it

Explore the practical uses of jQuery focus events

In-depth understanding of the application scenarios of jQuery focus events requires specific code examples

jQuery is a widely used JavaScript library that simplifies the operation of HTML documents. Among them, the focus event is one of the common and important events in jQuery, which can add interactivity and user experience to web pages.

Focus events include focus, blur, focusin and focusout. The focus event is triggered when an element gains focus, while the blur event is triggered when an element loses focus. The focusin event is similar to the focus event, but it can bubble, while the focus event does not bubble. Focusout is similar to the blur event, but it can bubble, while the blur event does not bubble.

The following will introduce several application scenarios of jQuery focus events and provide specific code examples:

Change the style when the input box gets focus

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <style>
     input:focus {
         border: 2px solid green;
     }
 </style>
</head>
<body>
 <input type="text" id="inputField">
 <script>
     $(document).ready(function() {
         $("#inputField").focus(function() {
             $(this).css("background-color", "lightblue");
         });

         $("#inputField").blur(function() {
             $(this).css("background-color", "white");
         });
     });
 </script>
</body>
</html>

Copy after login

Display prompt information when the input box gets focus

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
 <input type="text" id="inputField" placeholder="请输入用户名">
 <p id="message" style="display: none; color: red;">请填写用户名</p>
 <script>
     $(document).ready(function() {
         $("#inputField").focus(function() {
             $("#message").show();
         });

         $("#inputField").blur(function() {
             $("#message").hide();
         });
     });
 </script>
</body>
</html>

Copy after login

Display different content when switching focus

<!DOCTYPE html>
<html>
<head>
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
 <input type="text" id="inputField1" placeholder="输入账号">
 <input type="text" id="inputField2" placeholder="输入密码" style="display: none;">
 <script>
     $(document).ready(function() {
         $("#inputField1").focus(function() {
             $("#inputField1").hide();
             $("#inputField2").show().focus();
         });

         $("#inputField2").blur(function() {
             if ($(this).val() === "") {
                 $(this).hide();
                 $("#inputField1").show();
             }
         });
     });
 </script>
</body>
</html>

Copy after login

Through the above code example , we can have an in-depth understanding of the application scenarios of jQuery focus events, helping us better use these events to enhance the interactivity and user experience of web pages.

The above is the detailed content of Explore the practical uses of jQuery focus events. For more information, please follow other related articles on the PHP Chinese website!