JavaScriptでkeyupを設定する方法！

JavaScriptのキーアップ(keyup)イベントについてまとめました。
下記について書いています。

・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タグに反映されました。
JavaScriptのonkeyupを動作確認

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メソッドで設定しているため、ページ全体でイベントが発生します。

動作確認

動作を確認すると、下記のようになりました。
初期は黄色で、キーを押し込んでいるときは青色になって、キーから指を離すと黄色に戻ります。

keydown・keyupイベントの組み合わせ動作確認

JavaScriptでkeyupを設定する方法まとめ

JavaScriptでkeyupイベントを設定する方法について確認しました。
記事の内容をまとめると、下記のようになります。

・keyupイベントはキーを離したときに発生するイベント
・keyupイベントはonkeyupやaddEventListenerを使うことで設定できた。
・keydownとkeyupを同じ要素に設定して、動作することが確認できた。

コメント