keypressとは
- ここで説明する keypress とは次の語句からなるjQueryのメソッドです。
- key
- 読み: キー
意味: 鍵、ここでは、キーボードのキーのこと - press
- 読み: プレス
意味: 押す
keypressメソッドの概要
このメソッドは、セレクタに該当する既存要素にキープレスイベントをバインドします。 また、メソッドの引数を空にした場合には既にバインドされているキープレスイベントを呼び出します。
キープレスイベントは、要素にフォーカスがあるときにキーボードのキーが押されると同時に発生します。
このメソッドの類似メソッドとして、 keydown() がありますが、 keydown() は [Shift] , [Backspace] など、文字入力を補助するキーにも反応します。 しかし、この keypress() は文字そのものを入力するためのキーにしか反応しません。
構文
サンプルを見る前に構文を確認しておきます。
Selector.keypress(Handler(EventObject));
Selector.keypress([EventData], Handler(EventObject));
Selector.keypress();
- 01: キープレスイベントが発生した時点でハンドラーが実行されます。
- 02: ハンドラーの引数であるイベントオブジェクトにデータを添付して実行します。
- 03: セレクタにバインドしているキープレスイベントを呼び出します。
サンプルコードと実行結果
ここでは、input 要素 password 型を題材にします。
この要素に入力されたキーを keypress() のイベントオブジェクトから取得して、一瞬だけ表示することで、誤入力を防ぐための補助を行います。
構文の全ての記法の理解には、 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" (パスワードを入力するための要素です。この要素に keypress() を使ってハンドラーをバインドします。)
- 08: span (キーを入力した時に、その文字を一瞬だけ表示するのに使用します。初期設定ではCSSで見えないようにしています。)
サンプルコード: script
<script>
$("input[type='password']").keypress(function(event){
$("span").text(event.key).fadeIn(0).fadeOut(200);
});
</script>
- 02-04: .keypress(Handler(EventObject)) (keypress()を使ってHandlerをバインドします。ハンドラーには関数を指定しています。)
- 03: $("span").text(event.key).fadeIn(0).fadeOut(200) (EventObjectから得たキーの文字を span のテキストに設定し、一瞬だけ要素を表示しています。)
password: