HTML onkeydownイベント属性とは？使い方とサンプルコードを解説
HTMLのonkeydownイベント属性は、ユーザーがキーボードのキーを押した瞬間に発火するイベント属性です。テキストボックスやテキストエリアへの入力など、キー操作に連動した処理を実行したい場面でよく利用されます。
基本構文
onkeydownイベント属性の基本的な書き方は以下のとおりです。
<タグ名 onkeydown="スクリプト">コンテンツ</タグ名>
対象となるHTML要素に「onkeydown」属性を指定し、値として実行したい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 onkeydown Event Attribute Demo</h1>
<textarea placeholder="Enter your message here" rows="5" cols="40" onkeydown="keyFn()"></textarea>
<div class="show"></div>
<script>
function keyFn() {
document.querySelector(".show").innerHTML = 'You enter: ' + document.querySelector("textarea").value;
}
</script>
</body>
</html>
実行結果
白いテキストエリアにメッセージを入力してみてください。キーを押すたびにonkeydownイベントが発火し、入力中の内容が下の領域に即座に反映されます。
onkeydownと関連イベントの違い
キーボード操作に関連するイベント属性には、似たものがいくつか存在します。用途に応じて使い分けましょう。
- onkeydown： キーが押された瞬間に発火（修飾キーも検知可能）
- onkeyup： 押していたキーが離された瞬間に発火
- onkeypress： 文字キーが押されたときに発火（非推奨のため現在は非推奨）
入力内容のバリデーションやショートカットキーの実装などでは、最も反応が早いonkeydownが選ばれることが多いです。ただし、確定後の値を取得したい場合はonkeyupやinputイベントの方が適しているケースもあります。
-
HTML ondragendイベント属性の使い方を徹底解説
ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q
-
HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説
HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード