HTMLのoninputイベント属性とは？基本構文とサンプルコードをわかりやすく解説
HTMLのoninputイベント属性は、ユーザーがinput要素やtextarea要素に入力を行ったタイミングで発火するイベント属性です。入力内容が変わるたびにリアルタイムでJavaScriptを実行できるため、入力チェックや文字数カウントなど、インタラクティブなWebページを作成する際に非常に役立ちます。
構文
oninputイベント属性の基本的な構文は以下のとおりです。
<tagname oninput="script"></tagname>
サンプルコード
ここでは、textarea要素に対してoninputイベント属性を使用した具体例を紹介します。テキストエリアに何かを入力すると、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;
}
textarea {
border: 2px solid #fff;
background: transparent;
font-size: 1rem;
}
::placeholder {
color: #000;
font-size: 1rem;
}
</style>
</head>
<body>
<h1>HTML oninput Event Attribute Demo</h1>
<textarea placeholder="Enter your message here" oninput="inputFn()" rows='8' cols="50"></textarea>
<script>
function inputFn() {
document.querySelector('textarea').style.background = '#ffffff36';
}
</script>
</body>
</html>
出力結果
上記のコードをブラウザで実行すると、次のような画面が表示されます。
それでは、テキストエリアにメッセージを入力して、oninputイベント属性がどのように動作するのか確認してみましょう。
テキストエリアに文字を入力した瞬間にoninputイベントが発火し、inputFn()関数が呼び出されて背景色が半透明の白へと変化します。このようにoninputイベント属性を活用することで、ユーザーの入力に即座に反応する動的なページを手軽に実装できます。
-
HTML ondragendイベント属性の使い方を徹底解説
ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q
-
HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説
HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード