JavaScriptのキーアップ(keyup)イベントについてまとめました。
下記について書いています。
・keyupイベントの設定方法
・keyupとkeydownイベントで背景色を変える
keyupイベントとは？
keyupイベントは、ユーザーがキーボードのキーを押してから指を離した瞬間に発生するイベントです。
このイベントは入力フィールドや画面全体で利用でき、リアルタイムの文字入力確認やショートカットキーの実装などに役立ちます。
keyupを設定する
keyupイベントの設定には、onkeyup属性を直接使う方法とaddEventListenerメソッドを使用する方法があります。
DOMの属性を使って設定する
HTMLのonkeyup属性を使って、直接イベントを設定する方法です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Keyupテスト</title>
<script>
function handleKeyup() {
const input = document.querySelector('#textInput').value;
document.querySelector('#output').textContent = `入力内容: ${input}`;
}
</script>
</head>
<body>
<input type="text" id="textInput" onkeyup="handleKeyup()" placeholder="キーを入力してください">
<p id="output"></p>
</body>
</html>
HTMLの解説
bodyタグの配下にinputタグを用意しています。
このテキストボックスに文字が入力され、キーボードのキーを離した時(キーアップ)に
設定しているonkeyup属性のhandleKeyup関数が呼び出されます。
JavaScriptの解説
handleKeyup関数では、querySelectorメソッドを使っています。
そして、テキストボックスにアクセスし、値を取得してinput変数に設定しています。
そのあとに、pタグの要素に取得した値を表示しています。
動作確認
実際に動作を確認すると、下記のようにキーボードを入力して、キーがあがったときに入力した内容がpタグに反映されました。
addEventListenerを使ってイベントを設定する
addEventListenerメソッドを使って、keyupイベントを設定する方法です。
先ほどと同様の内容をaddEventListenerで実現しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Keyupテスト</title>
<script>
window.onload = () => {
document.querySelector('#textInput').addEventListener('keyup', (event) => {
const input = event.target.value;
document.querySelector('#output').textContent = `入力内容: ${input}`;
});
}
</script>
</head>
<body>
<input type="text" id="textInput" placeholder="キーを入力してください">
<p id="output"></p>
</body>
</html>
HTMLの解説
bodyタグの下に、先ほどと同じようにテキストボックスを用意しています。
今回はaddEventListenerメソッドで要素に対してイベントを追加するので、onkeyup属性をつけていません。
JavaScriptの解説
window.onloadでページ読み込みが完了した時に、処理をするようにしました。
querySelectorメソッドでテキストボックスを取得しています。
そして、addEventListenerメソッドでkeyupイベントを追加しました。
第1引数に渡しているのがイベント名で、第2引数に処理内容を書いています。
処理内容としては、引数のeventオブジェクトを取得しています。
そして、event.target.valueで入力された内容を取得して、pタグの要素に取得内容を表示しています。
処理を実行すると、先ほどと同様に、入力されてキーが上げられてからイベントが走ることが確認できました。
keyupとkeydownイベントで背景色を変える
keyupとkeydownイベントを組み合わせて使っているサンプルです。
画面上でキーを押し込んだ時に、指定した要素の背景色を変えて、キーが上がったら元の色に戻すようにしてみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>KeydownとKeyupの組み合わせ</title>
<style>
body {
text-align: center;
padding: 20px;
}
#display {
width: 300px;
height: 150px;
border: 1px solid #000;
margin: 20px auto;
background-color: yellow;
}
</style>
<script>
window.onload = () => {
const display = document.querySelector('#display');
// keydownで背景色を青に変更
document.addEventListener('keydown', function() {
display.style.backgroundColor = 'lightblue';
});
// keyupで背景色を白に戻す
document.addEventListener('keyup', function() {
display.style.backgroundColor = 'yellow';
});
};
</script>
</head>
<body>
<div id="display">背景が変わります</div>
</body>
</html>
HTMLの解説
bodyタグの配下には、色を変えるためのdivタグを用意しています。
idとしてdisplayを設定しました。
styleタグ配下でcssを書いていて、初期の背景として黄色にしています。
JavaScriptの解説
window.onloadでページが読み込み終わってから処理しています。
querySelectorメソッドで、displayが設定されているdivタグ要素を取得しています。
そして、keydownイベントの時には、divタグの背景色を青色(lightblue)に設定しています。
keyupイベントの時には、divタグの背景色を黄色(yellow)に戻すようにしました。
documentにaddEventListenerメソッドで設定しているため、ページ全体でイベントが発生します。
動作確認
動作を確認すると、下記のようになりました。
初期は黄色で、キーを押し込んでいるときは青色になって、キーから指を離すと黄色に戻ります。
JavaScriptでkeyupを設定する方法まとめ
JavaScriptでkeyupイベントを設定する方法について確認しました。
記事の内容をまとめると、下記のようになります。
・keyupイベントはonkeyupやaddEventListenerを使うことで設定できた。
・keydownとkeyupを同じ要素に設定して、動作することが確認できた。
コメント