keydownとは
- ここで説明する keydown とは次の語句からなるjQueryのメソッドです。
- key
- 読み: キー
意味: 鍵、ここでは、キーボードのキーのこと - down
- 読み: ダウン
意味: 下、ここでは、キーを押し下げること
keydownメソッドの概要
このメソッドは、セレクタに該当する既存要素にキーダウンイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているキーダウンイベントを呼び出します。
キーダウンイベントは、要素にフォーカスがあるときにキーボードのキーが押し下げられると同時に発生します。
このメソッドの類似メソッドとして、 keypress() がありますが、 keypress() は [Shift] , [Backspace] など、文字入力を補助するキーには反応しません。 しかし、この keydown() は文字入力を補助するキーにも反応します。
構文
サンプルを見る前に構文を確認しておきます。
Selector.keydown(Handler(EventObject));
Selector.keydown([EventData], Handler(EventObject));
Selector.keydown();
- 01: キーダウンイベントが発生した時点でハンドラーが実行されます。
- 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
- 03: セレクタにバインドしているキーダウンイベントを呼び出します。
サンプルコードと実行結果
ここでは、input 要素 password 型を題材にします。
この要素に入力されたキーを keydown() のイベントオブジェクトから取得して、一瞬だけ表示することで、誤入力を防ぐための補助を行います。
構文の全ての記法の理解には、 click() のページを参照してください。
サンプルコード: CSS
<style>
input[type="password"]{
margin: 2em 2em 2em 0;
}
span{
display: none;
font-size: 2em;
}
</style>
サンプルコード: HTML
<head>
<style>...</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
password:
<input type="password" placeholder="入力してください">
< span>< /span>
<script>...</script>
</body>
- 07: input type="password" (パスワードを入力するための要素です。この要素に keydown() を使ってハンドラーをバインドします。)
- 08: span (キーを入力した時に、その文字を一瞬だけ表示するのに使用します。初期設定ではCSSで見えないようにしています。)
サンプルコード: script
<script>
$("input[type='password']").keydown(function(event){
if(##String(event.key).length < 2){
$("span").text(event.key).fadeIn(0).fadeOut(200);
}
});
</script>
- 02-06: .keydown(Handler(EventObject)) (keydown()を使ってHandlerをバインドします。ハンドラーには関数を指定しています。)
- 03-05: if(String(event.key).length < 2) (EventObjectから得たキーの文字数が2文字未満の場合に 04行のコードを実行します。例えば、「p」の文字は1文字なので2文字未満ですが、[Shift]キーを押した場合には「Shift」と返ってきますので入力補助に使われるキーを除外する目的でif文を使用しています。)
- 04: $("span").text(event.key).fadeIn(0).fadeOut(200) (EventObjectから得たキーの文字を span のテキストに設定し、一瞬だけ要素を表示しています。)
password: