onkeyup イベントハンドラについて

JavaScriptにおける onkeyup イベントハンドラは、ユーザーがキーボードのキーを押した後にキーを離した際に発生するイベントを処理するための方法です。 これにより、リアルタイムでユーザーの入力を監視したり、特定のキー操作に応じた動作を実行したりすることができます。 本記事では、onkeyup イベントの概要や使用例を紹介します。

• 基本的な使い方
• フォーム入力のリアルタイム検証
• 動的検索機能の実装
• 特定のキーの検出
• イベントオブジェクトの利用

基本的な使い方

onkeyup は、HTML要素に直接記述するか、JavaScriptでイベントリスナーを設定することで使用できます。

HTMLでの設定例

<input type="text" onkeyup="alert('キーが離されました！')">

このコードでは、テキストボックスに文字を入力し、キーを離すたびにアラートが表示されます。

JavaScriptでの設定例

document.getElementById('input-box').onkeyup = function() {
    alert('キーが離されました！');
};

または、addEventListener を使用して以下のように設定できます。

document.getElementById('input-box').addEventListener('keyup', function() {
    alert('キーが離されました！');
});

フォーム入力のリアルタイム検証

onkeyup を使用して、ユーザーがフォームに入力している間にリアルタイムでデータを検証できます。

例: メールアドレスの検証

<input type="email" id="email-input" placeholder="メールアドレスを入力してください" onkeyup="validateEmail()">
<span id="email-feedback"></span>

<script>
function validateEmail() {
    const emailInput = document.getElementById('email-input').value;
    const feedback = document.getElementById('email-feedback');
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (emailPattern.test(emailInput)) {
        feedback.textContent = '有効なメールアドレスです';
    } else {
        feedback.textContent = '無効なメールアドレスです';
    }
}
</script>

動的検索機能の実装

検索ボックスに入力するたびにデータをフィルタリングする動的な検索機能を作ることも可能です。

例: リストのフィルタリング

<input type="text" id="search-box" placeholder="検索..." onkeyup="filterList()">
<ul id="item-list">
    <li>Apple</li>
    <li>Banana</li>
    <li>Cherry</li>
    <li>Date</li>
    <li>Elderberry</li>
</ul>

<script>
function filterList() {
    const searchBox = document.getElementById('search-box').value.toLowerCase();
    const items = document.querySelectorAll('#item-list li');
    items.forEach(item => {
        if (item.textContent.toLowerCase().includes(searchBox)) {
            item.style.display = '';
        } else {
            item.style.display = 'none';
        }
    });
}
</script>

特定のキーの検出

onkeyup イベントを利用して、特定のキーが押されたことを検出できます。

例: Enterキーの検出

<input type="text" id="key-detect" placeholder="キーを押してください" onkeyup="checkEnterKey(event)">

<script>
function checkEnterKey(event) {
    if (event.key === 'Enter') {
        alert('Enterキーが押されました');
    }
}
</script>

イベントオブジェクトの利用

onkeyup イベントでは、イベントオブジェクトを利用することで、キーコードやキー名などの詳細な情報を取得できます。

例: 入力されたキーの表示

<input type="text" id="key-display" placeholder="キーを押してください" onkeyup="showKey(event)">
<p id="key-output"></p>

<script>
function showKey(event) {
    const keyOutput = document.getElementById('key-output');
    keyOutput.textContent = `押されたキー: ${event.key}`;
}
</script>