jQuery フォーカスイベントの実際的な使用法を探る-jsチュートリアル-php.cn

jQuery フォーカスイベントの実際的な使用法を探る

PHPz

リリース： 2024-02-26 18:12:24

オリジナル

1154 人が閲覧しました

jQuery フォーカスイベントの実際的な使用法を探る

jQuery フォーカスイベントのアプリケーションシナリオを深く理解するには、具体的なコード例が必要です。

jQuery は、HTML ドキュメントの操作を簡素化する、広く使用されている JavaScript ライブラリです。その中でも、フォーカスイベントは jQuery の一般的かつ重要なイベントの 1 つであり、Web ページに対話性とユーザーエクスペリエンスを追加できます。

フォーカスイベントには、フォーカス、ブラー、フォーカスイン、フォーカスアウトが含まれます。 focus イベントは要素がフォーカスを取得したときにトリガーされ、blur イベントは要素がフォーカスを失ったときにトリガーされます。 focusin イベントは focus イベントに似ていますが、focus イベントはバブルしませんが、バブルする可能性があります。フォーカスアウトはブラーイベントに似ていますが、ブラーイベントはバブルしませんが、バブルする可能性があります。

以下では、jQuery フォーカスイベントのいくつかのアプリケーションシナリオを紹介し、具体的なコード例を示します。

入力ボックスがフォーカスを取得したときにスタイルを変更する

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

ログイン後にコピー

入力ボックスがフォーカスを取得したときにプロンプト情報を表示

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

ログイン後にコピー

フォーカスを切り替えたときに別のコンテンツを表示

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

ログイン後にコピー

上記のコード例を参照すると、jQuery フォーカスイベントのアプリケーションシナリオを深く理解でき、これらのイベントをより適切に使用して Web ページの対話性とユーザーエクスペリエンスを向上させることができます。

以上がjQuery フォーカスイベントの実際的な使用法を探るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。