データの検証や検証などのシナリオでは、ユーザーが単一の押しキーをキーボードから放すたびに、フィールド要素のスタイルが変更されます。各キーを押すか離すかに応じたこのスタイルの変更は、jQuery によって提供されるイベント ハンドラーを介して実行されます。具体的には、押されたキーが離されたときに関数を処理または呼び出すイベント ハンドラーまたはメソッドが「 キーアップ （）' 方法。
一方、ファンクションキーが押されたことを処理または呼び出すメソッドは「 キーダウン ()」メソッドを使用すると、関連するものを確認できます。 記事 このイベントのために。
このブログでは、jQuery keyup() メソッドについて簡単に説明します。
jQuery keyup() メソッドの使用方法
jQuery 」 キーアップ ()」メソッドは、ユーザーが選択したフィールド内のキーを押すか入力するのを止めるたびに、匿名関数をトリガーします。このメソッドは、選択した要素にリアルタイムで動的なスタイルを適用するためにも使用されます。
構文
keyup() jQuery メソッドに使用される構文は次のとおりです。
$ ( 'これ' ） 。 キーアップ ( カスタムファンク ）
上記の構文では、「 これ ” は選択した HTML 要素であり、” カスタムファンク 」は「」によって実行される機能です。 キーアップ 「」メソッドを「」よりも これ ”。
より深く理解するために、いくつかの例を見てみましょう。
例 1: 「keyup()」メソッドを使用して文字の色を変更する
この場合、以下に示すように、ユーザーがすでに押しているキーを放すと、入力されたテキストの色が別の色に変更されます。
< html >
< 頭 >
< 脚本 送信元 = 「https://code.jquery.com/jquery-3.7.0.js」 >< / 脚本 >
< 脚本 >
$(document).ready(function() {
$('#demo').keyup(function() {
$('#demo').css('color', 'forestgreen');
});
});
< / 脚本 >
< / 頭 >
< 体 >
< ディビジョン >
Linuxhint データを入力します。 < 入力 ID = 'デモ' タイプ = '文章' / >
< / ディビジョン >
< / 体 >
< / html >
上記のコードの説明は次のとおりです。
- まず、こちらにアクセスしてオンライン CDN を挿入し、jQuery をプロジェクトにインポートします。 リンク 公式ドキュメントの。
- 次に、「」のときに呼び出される匿名関数を作成します。 書類 」と表示されるか、ページが読み込まれます。この関数は、ID が「demo」の HTML 要素を選択し、「 キーアップ ()」メソッドを使用します。
- ” キーアップ ()」メソッドは、「」を使用するコールバック関数を呼び出します。 css ()」を押して、テキストの文字色を「」に設定します。 フォレストグリーン ”。
- ここで、選択した「<」を作成します。 入力 「<」内の「>」要素 体 >” タグを作成し、ID を “” に割り当てます。 デモ ”。
コンパイルプロセスの完了後の Web ページのプレビュー:
出力には、選択したキーが放されたときにテキストの色が変化することが示されています。
例 2: 背景色を動的に変更する
この例では、ユーザーが押したキーを離れるたびに、選択した HTML 要素に異なる背景色が設定されます。このシナリオのコードを見てみましょう。
< 頭 >< 脚本 送信元 = 「https://code.jquery.com/jquery-3.7.0.js」 >< / 脚本 >
< 脚本 >
背景シェードを設定しましょう = [ 「アクアマリン」 、 'オレンジレッド' 、 「カデットブルー」 、 'フォレストグリーン' 、
'ライトグレー' 、 「サンディブラウン」 、 '赤紫色' 、 「バーリーウッド」 】 ;
させてください = 0 ;
$ ( 書類 ） .keyup ( 関数 ( イベント ） {
$ ( 「#hgg」 ） .css ( '背景色' 、背景シェード [ j 】 ） ;
j++;
j = j% 9 ;
} ） ;
< / 脚本 >
< / 頭 >
< 体 >
< h1 スタイル = 「カラー：シーグリーン」 >Linuxヒントの記事< / h1 >< br >
< ディビジョン ID = 「ハッ」 スタイル = 「パディング: 10px」 >
< h2 >jQuery keyup を別の設定に使用する 背景 キーが放されるたびに。< / h2 >
< br / >
< / ディビジョン >
< / 体 >
上記のコードの説明:
- まず、「<」内に jQuery CDN を追加して、プロジェクトに jQuery をインポートします。 頭 >」タグ。
- 次に、「」という名前の配列を作成します。 背景シェード 」にはランダムな8色が含まれています。
- 次に、「 キーアップ ()」メソッドが「」に付属します。 書類 ” そして匿名コールバック関数を呼び出します。この関数は、ID が「」の HTML 要素を選択します。 うーん ” そして CSS を適用します” 背景色 ' 財産。
- 配列「 背景シェード ” が CSS プロパティの値として渡され、インデックスが “ j ' 変数。この変数は毎回 1 ずつ増加し、「」から再開されます。 0 値が「」に達したときのインデックス 8 ”。配列内の最大インデックスは「」であるため、 7 ”。
- その後、選択した「」を作成します。 ディビジョン ” という ID を持つ要素 うーん 」のように、押されたキーが放されると、この要素の背景色が変更されます。
コンパイル後の Web ページのプレビュー:
出力では、押されたキーまたは選択されたキーが放されるたびに、選択された HTML 要素の背景色が変化することが確認されます。 「」の使い方については以上です。 キーアップ （）' 方法。
結論
jQuery 」 キーアップ ()」メソッドは、押されたキーが放されたときに、選択された HTML 要素に対してコールバック関数をトリガーします。このメソッドはキーが押されているときに呼び出されるのではなく、キーを離したときまたはキーを押したときにこの関数がコールバック関数を実行します。このブログでは、jQuery keyup() メソッドの使用法と動作について説明しました。