HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML onkeyupイベント属性とは？使い方とサンプルコードをわかりやすく解説

HTMLのonkeyupイベント属性は、ユーザーがキーボードのキーを離した瞬間にJavaScriptを実行するためのイベント属性です。フォーム入力のリアルタイムチェックや文字数カウントなど、インタラクティブなWebページを作成する際に非常に便利です。

onkeyupイベント属性の基本構文

onkeyup属性は、以下のようにHTMLタグ内に記述します。

<tagname onkeyup="script">Content</tagname>

「script」の部分には、キーが離されたときに実行したいJavaScriptのコードまたは関数名を指定します。

関連イベントとの違い

キーボード操作に関連するイベント属性には、以下のような種類があります。それぞれ発火のタイミングが異なるので、用途に応じて使い分けましょう。

  • onkeydown：キーが押された瞬間に発火
  • onkeypress：文字キーが押されている間に発火（現在は非推奨）
  • onkeyup：キーが離された瞬間に発火

onkeyupイベント属性の使用例

ここでは、テキストエリアに入力した内容が、キーを離すたびに画面下へリアルタイム表示されるデモを紹介します。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
    .show {
        font-size: 1.2rem;
    }
</style>
</head>
<body>
<h1>HTML onkeyup Event Attribute Demo</h1>
<textarea placeholder="Enter your message here" rows="5" cols="40" onkeyup="keyFn()"></textarea>
<div class="show"></div>
<script>
    function keyFn() {
        document.querySelector(".show").innerHTML = 'You enter: ' + document.querySelector("textarea").value;
    }
</script>
</body>
</html>

コードのポイント解説

  • テキストエリア（<textarea>）にonkeyup="keyFn()"を指定し、キーが離されるたびにkeyFn()関数を呼び出しています。
  • keyFn()関数内では、document.querySelector()を使ってテキストエリアの入力値を取得し、.showクラスの要素へ反映させています。
  • この仕組みにより、ユーザーが1文字入力するごとに表示が即座に更新されます。

実行結果

ブラウザでこのコードを実行すると、白いテキストエリアが表示されます。

HTML onkeyupイベント属性とは？使い方とサンプルコードをわかりやすく解説

テキストエリアに任意のメッセージを入力してみてください。キーを離すたびに、入力内容が下部にリアルタイムで表示される様子を確認できます。

HTML onkeyupイベント属性とは？使い方とサンプルコードをわかりやすく解説

まとめ

onkeyupイベント属性を使えば、キーボード入力の完了タイミングを簡単に検知できます。入力補完機能、検索候補の自動表示、文字数カウンタなど、さまざまな場面で応用できるので、ぜひ実際のプロジェクトでも活用してみてください。

  1. HTML ondragendイベント属性の使い方を徹底解説

    ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q

  2. HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説

    HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード