今回は、JavaScriptで使われるkeyupイベントについて。
文字を打ち込みキーボードを離した際に値を取得したい時に使います。
keyupイベントとは？
keyupとは、キーボードを離した際に発生するイベントのこと。
キーボードを押している時にはイベントは発生しません。
離した時にイベントが発生されるのがポイントです。
サンプルプログラムを書いてみよう
では実際にkeyupイベントを使って、サンプルプログラムを書いてみましょう。
HTML
HTMLコードはこちら。
<input type="text" id='target'>
後でJavaScriptでDOM操作をしたいので、「id=’target’」を指定したinputタグを用意しました。
JavaScript
JavaScriptコードはこちら。
let target = document.getElementById('target');
target.addEventListener('keyup', () => {
console.log(target.value.length);
});
まずは、「id=’target’」を変数targetに代入します。
そして変数targetでアロー関数を組みます。
中に文字を入力して離した際の文字数を取得し、その文字数をconsoleに出力するようにコードを書います。
結果、キーボードを離したタイミングでの文字数がconsoleに出力されるようになりました。
keyupは上記のコードのように、キーボードを「離した」タイミングでイベントが発生するので、注意してください。
まとめ
以上が、keyupイベントでした。
文字数カウンターアプリを使うときに使えますので、是非試してみてください。
