Explorez les utilisations pratiques des événements de focus jQuery-js tutoriel-php.cn

Explorez les utilisations pratiques des événements de focus jQuery

PHPz

Libérer： 2024-02-26 18:12:24

original

1123 Les gens l'ont consulté

Explorez les utilisations pratiques des événements de focus jQuery

Une compréhension approfondie des scénarios d'application des événements focus jQuery nécessite des exemples de code spécifiques

jQuery est une bibliothèque JavaScript largement utilisée qui simplifie le fonctionnement des documents HTML. Parmi eux, l'événement focus est l'un des événements courants et importants dans jQuery, qui peut ajouter de l'interactivité et de l'expérience utilisateur aux pages Web.

Les événements de mise au point incluent la mise au point, le flou, la mise au point et la mise au point. L'événement focus est déclenché lorsqu'un élément obtient le focus, tandis que l'événement flou est déclenché lorsqu'un élément perd le focus. L'événement focusin est similaire à l'événement focus, mais il peut faire des bulles, alors que l'événement focus ne fait pas de bulles. Focusout est similaire à l'événement de flou, mais il peut faire des bulles, alors que l'événement de flou ne fait pas de bulles.

Ce qui suit présentera plusieurs scénarios d'application d'événements de focus jQuery et fournira des exemples de code spécifiques :

Changer le style lorsque la zone de saisie obtient le 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>

Copier après la connexion

Afficher les informations d'invite lorsque la zone de saisie obtient le 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>

Copier après la connexion

Switch Afficher différents contenus lorsqu'il est concentré

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

Copier après la connexion

Grâce aux exemples de code ci-dessus, nous pouvons avoir une compréhension approfondie des scénarios d'application des événements de focus jQuery, nous aidant à mieux utiliser ces événements pour améliorer l'interactivité et l'expérience utilisateur du Web pages.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!