EditContext: selectionStart-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 Eigenschaft selectionStart
des EditContext
gibt den Versatz innerhalb des bearbeitbaren Textinhalts an, ab dem die aktuelle Auswahl beginnt.
Wert
Eine Number
Beispiele
Verwendung von selectionStart
zur Darstellung der Benutzerauswahl in einem bearbeitbaren Canvas
Dieses Beispiel zeigt, wie die Eigenschaften selectionStart
und selectionEnd
verwendet 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-selectionstart |
Browser-Kompatibilität
BCD tables only load in the browser