EditContext: updateSelection() メソッド
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
EditContext
インターフェイスの updateSelection()
メソッドは、編集可能なテキストコンテンツ内の選択の内部状態を更新します。このメソッドは、マウスのクリックやドラッグ、およびキーボード操作など、ユーザーが EditContext
に関連付けられた要素で描画されたテキストの操作を行った際に選択の状態を更新するために用いられます。
構文
js
updateSelection(start, end)
引数
例外
- 引数が 1 個しか渡されなかった場合、
TypeError
DOMException
が投げられます。 - いずれかの引数が非負の数値でない場合、
DOMException
が投げられます。
例
ユーザーがテキストを操作した際、選択範囲を更新する
この例では、updateSelection
メソッドを用いて、矢印キーを用いて編集可能な領域内でキャレットを動かしたりテキストを選択したりする際に canvas
要素の EditContext
内の選択範囲を更新する方法を示します。
html
<canvas id="editor-canvas"></canvas>
js
const canvas = document.getElementById("editor-canvas");
const editContext = new EditContext();
canvas.editContext = editContext;
canvas.addEventListener("keydown", (e) => {
if (e.key == "ArrowLeft") {
const newPosition = Math.max(editContext.selectionStart - 1, 0);
if (e.shiftKey) {
editContext.updateSelection(newPosition, editContext.selectionEnd);
} else {
editContext.updateSelection(newPosition, newPosition);
}
} else if (e.key == "ArrowRight") {
const newPosition = Math.min(
editContext.selectionEnd + 1,
editContext.text.length,
);
if (e.shiftKey) {
editContext.updateSelection(editContext.selectionStart, newPosition);
} else {
editContext.updateSelection(newPosition, newPosition);
}
}
console.log(
`The new EditContext selection is ${editContext.selectionStart}, ${editContext.selectionEnd}`,
);
});
仕様書
Specification |
---|
EditContext API # dom-editcontext-updateselection |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
updateSelection |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
関連情報
- 属する
EditContext
インターフェイス