EditContext: selectionEnd-Eigenschaft
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.
Die schreibgeschützte selectionEnd
-Eigenschaft des EditContext
bezieht sich auf den Offset innerhalb des bearbeitbaren Textinhalts, der das Ende der aktuellen Auswahl darstellt.
Wert
Eine Number
Beispiele
Verwendung von selectionEnd
, um die Benutzerauswahl in einer bearbeitbaren Leinwand darzustellen
Dieses Beispiel zeigt, wie die Eigenschaften selectionStart
und selectionEnd
genutzt werden, um die aktuelle Auswahl in einem <canvas>
-Element zu zeichnen, das mit einem EditContext
verbunden ist.
<canvas id="editor-canvas"></canvas>
const ANCHOR_X = 10;
const ANCHOR_Y = 30;
const FONT_SIZE = 20;
const canvas = document.getElementById("editor-canvas");
const ctx = canvas.getContext("2d");
ctx.font = `${FONT_SIZE}px Arial`;
const editContext = new EditContext({
text: "Hello world!",
selectionStart: 6,
selectionEnd: 11,
});
canvas.editContext = editContext;
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Render the entire text content first.
ctx.fillStyle = "black";
ctx.fillText(editContext.text, ANCHOR_X, ANCHOR_Y);
// Get the width from the start of the text to the start of the selection.
const selectionStartX = ctx.measureText(
editContext.text.substring(0, editContext.selectionStart),
);
// Get the width of the selection.
const selectionWidth = ctx.measureText(
editContext.text.substring(
editContext.selectionStart,
editContext.selectionEnd,
),
);
// Draw a rectangle on top of the text to represent the selection.
ctx.fillStyle = "blue";
ctx.fillRect(
selectionStartX.width + ANCHOR_X,
ANCHOR_Y - FONT_SIZE,
selectionWidth.width,
FONT_SIZE,
);
// Re-render just the selected text in white, over the rectangle.
ctx.fillStyle = "white";
ctx.fillText(
editContext.text.substring(
editContext.selectionStart,
editContext.selectionEnd,
),
selectionStartX.width + ANCHOR_X,
ANCHOR_Y,
);
}
render();
Spezifikationen
Specification |
---|
EditContext API # dom-editcontextinit-selectionend |
Browser-Kompatibilität
BCD tables only load in the browser