HTML onselectイベント属性の使い方と実装例
HTMLのonselectイベント属性は、ユーザーがHTMLドキュメント内で要素のテキストを選択したタイミングで発生するイベント属性です。主に<input>や<textarea>など、テキスト入力・編集が可能な要素に対して設定され、テキストが選択された瞬間に指定したJavaScriptを実行できます。
基本構文
onselectイベント属性の基本的な記述方法は以下のとおりです。
<tagname onselect="script"></tagname>
「script」の部分には、テキスト選択時に実行したいJavaScriptのコードまたは関数名を記述します。
onselectイベントの実装例
ここでは、<textarea>要素にonselectイベント属性を設定し、テキストが選択されたときにページの背景グラデーションとテキストエリアの背景色が変化するサンプルを紹介します。
<!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;
padding: 10px;
}
::placeholder {
color: #000;
}
</style>
</head>
<body>
<h1>HTML onselect Event Attribute Demo</h1>
<textarea onselect="selectFn()" rows="5" cols="50">Please select me because I'm dummy text.</textarea>
<script>
function selectFn() {
document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
document.querySelector("textarea").style.background = "#fff";
}
</script>
</body>
</html>
実行結果
このコードをブラウザで開くと、オレンジ系のグラデーション背景にテキストエリアが表示されます。
次に、テキストエリア内のダミーテキストをマウスでドラッグして選択してみてください。onselectイベントが発火し、関数selectFn()が呼び出されることで、背景が青系のグラデーションに切り替わり、テキストエリアの背景も白色に変化します。
まとめ
onselectイベント属性は、テキスト選択というユーザーの操作に合わせて処理を実行できる便利な属性です。テキスト選択時にヒントを表示したり、UIのデザインを動的に変更したりといったインタラクティブな演出に活用できます。
-
HTML ondragendイベント属性の使い方を徹底解説
ondragendイベント属性とはHTMLのondragendイベント属性は、HTMLドキュメント内でユーザーが要素やテキストのドラッグを終了した時点で発生するイベントです。ドラッグ&ドロップ操作の一連の流れの最後に実行されるため、ドラッグ完了後の処理(メッセージの表示や状態の更新など)を実装するのに便利です。なお、ondragendイベントはドラッグ元の要素に対して発生する点に注意してください。ドロップ先の要素で発生するのは「drop」イベントであり、役割が異なります。構文ondragendイベント属性の基本的な構文は以下のとおりです。<tagname ondragend=&q
-
HTMLのonpageshowイベント属性とは？使い方をサンプルコード付きで解説
HTMLのonpageshowイベント属性は、ユーザーがWebページへ移動（ナビゲート）したときに発生するイベントです。ページが最初に読み込まれたときはもちろん、ブラウザの「戻る」ボタンなどでキャッシュからページが再表示されたときにも発火する点が大きな特徴です。 構文 onpageshowイベント属性の基本構文は次のとおりです。 <body onpageshow="script"></body> HTML onpageshowイベント属性のサンプル ここでは、ページが表示されたタイミングでアラートを表示するシンプルな例を紹介します。 サンプルコード