Maison > Article > interface Web > Explorez les utilisations pratiques des événements de focus jQuery

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

PHPzoriginal: 2024-02-26 18:12:241084parcourir

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>

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>

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>

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!

JavaScript jquery html 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：5 méthodes simples de liaison d'événements jQueryArticle suivant：5 méthodes simples de liaison d'événements jQuery

Articles Liés

Voir plus