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

HTMLのonkeypressイベント属性とは？使い方とサンプルコードを解説

HTMLのonkeypressイベント属性は、ユーザーがキーボードのキーを押した瞬間に発生するイベントです。この属性を使うことで、キー入力に応じたJavaScriptの処理を実行できます。

onkeypressイベント属性の基本

onkeypressは、テキスト入力中にリアルタイムで処理を行いたい場合に便利なイベント属性です。例えば、入力内容を即座に画面に表示したり、入力文字数をカウントしたりする用途に適しています。

構文

onkeypressイベント属性の基本的な構文は以下のとおりです。

<tagname onkeypress="script">コンテンツ</tagname>

タグ名にonkeypress属性を指定し、値として実行したいJavaScriptのコードまたは関数を記述します。

サンプルコード

ここでは、テキストエリアに文字を入力すると、入力内容がリアルタイムで画面に表示される例を紹介します。

<!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 onkeypressイベント属性のデモ</h1>
<textarea class="" placeholder="ここにメッセージを入力してください" rows="5" cols="40" onkeypress="keyFn()"></textarea>
<div class="show"></div>
<script>
    function keyFn() {
        document.querySelector(".show").innerHTML = '入力した内容: ' + document.querySelector("textarea").value;
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、グラデーション背景のページ中央にテキストエリアが表示されます。

HTMLのonkeypressイベント属性とは？使い方とサンプルコードを解説

白いテキストエリアにメッセージを入力すると、キーが押されるたびにonkeypressイベントが発生し、入力内容がテキストエリアの下にリアルタイムで表示されます。

HTMLのonkeypressイベント属性とは？使い方とサンプルコードを解説

onkeypressイベントの注意点

onkeypressイベントにはいくつか注意すべき点があります。

1. 修飾キーには反応しない

onkeypressは、Shift、Ctrl、Altなどの修飾キー単独の押下では発生しません。文字が入力されるキーの操作に対してのみ反応します。

2. 非推奨のイベント属性である

onkeypressはHTMLの仕様上、非推奨（deprecated）とされています。現代のWeb開発では、より柔軟で推奨されているkeydownやkeyupイベント、またはaddEventListener()メソッドを使うことが望ましいとされています。

document.querySelector("textarea").addEventListener("keydown", keyFn);

3. 日本語入力（IME）との相性

日本語などのマルチバイト文字をIME経由で入力する場合、確定前の入力ではonkeypressイベントが期待どおりに発生しないことがあります。そのようなケースでは、inputイベントの利用を検討するとよいでしょう。

まとめ

onkeypressイベント属性は、キーボードのキーが押されたときにJavaScriptを実行するためのシンプルな仕組みです。学習用や簡単なデモには便利ですが、実務ではkeydownイベントやaddEventListener()メソッドを使うのが一般的です。用途に応じて適切なイベントを選択しましょう。

  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イベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード