このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
HTMLInputElement: selectionchange イベント
Baseline
2024
最近利用可能
September 2024以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
selectionchange は選択 API のイベントで、 <input> 要素の中でテキストの選択状態が変化したときに発行されます。
これは、文字単位の選択範囲位が変化した場合も、キャレットが移動したときも含みます。
このイベントはキャンセル不可です。
このイベントは通常 <input> 上にイベントリスナーを追加し、ハンドラー関数内で HTMLInputElement の selectionStart、selectionEnd、selectionDirection の各プロパティを読み取ることで処理します。
また、onselectionchange イベントハンドラーにリスナーを追加し、ハンドラー関数内で Document.getSelection() を使って選択状態を得ることもできます。しかし、これはテキストの選択範囲の変更を取得するのにはあまり便利ではありません。
構文
このイベント名を addEventListener() 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("selectionchange", (event) => {});
onselectionchange = (event) => {};
イベント型
一般的な Event です。
例
以下の例は、 <input> 要素の中にあるテキストの選択状態を取得する方法を示しています。
HTML
<div>
こちらにテキストを入力して選択してください:<br /><input
id="mytext"
rows="2"
cols="20" />
</div>
<div>selectionStart: <span id="start"></span></div>
<div>selectionEnd: <span id="end"></span></div>
<div>selectionDirection: <span id="direction"></span></div>
JavaScript
const myinput = document.getElementById("mytext");
myinput.addEventListener("selectionchange", () => {
document.getElementById("start").textContent = myinput.selectionStart;
document.getElementById("end").textContent = myinput.selectionEnd;
document.getElementById("direction").textContent = myinput.selectionDirection;
});
結果
仕様書
| 仕様書 |
|---|
| Selection API # selectionchange-event |
| Selection API # dom-globaleventhandlers-onselectionchange |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。