Selection: modify()-Methode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Die Selection.modify()-Methode wendet eine Änderung auf die aktuelle Auswahl oder die Cursorposition an, indem einfache textuelle Befehle verwendet werden.

Syntax

modify(alter, direction, granularity)

Parameter

alter: Die Art der anzuwendenden Änderung. Geben Sie "move" an, um die aktuelle Cursorposition zu verschieben oder "extend", um die aktuelle Auswahl zu erweitern.
direction: Die Richtung, in der die aktuelle Auswahl angepasst werden soll. Sie können "forward" oder "backward" angeben, um in die entsprechende Richtung basierend auf der Sprache am Auswahlpunkt anzupassen. Wenn Sie in eine spezifische Richtung anpassen möchten, können Sie "left" oder "right" angeben.
granularity: Die Distanz, um die die aktuelle Auswahl oder Cursorposition angepasst werden soll. Sie können nach "character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphboundary" oder "documentboundary" bewegen.

Hinweis: Firefox implementiert nicht "sentence", "paragraph", "sentenceboundary", "paragraphboundary" oder "documentboundary". WebKit und Blink tun es.

Hinweis: Ab Firefox 5 schließt die "word" Granularität nicht mehr den folgenden Raum ein, unabhängig vom Standardplattformverhalten. Dies macht das Verhalten konsistenter und funktioniert so, wie es WebKit früher tat, aber leider haben sie kürzlich ihr Verhalten geändert.

<p>
  Click somewhere in this example. Then click the button below to expand the
  selection. Watch what happens!
</p>
<p>
  Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore,
  cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod
  maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
  repellendus.
</p>

<label for="granularity">Granularity:</label>
<select id="granularity">
  <option value="character">Character</option>
  <option value="word">Word</option>
  <option value="sentence">Sentence</option>
  <option value="line">Line</option>
  <option value="paragraph">Paragraph</option>
  <option value="lineboundary">Line Boundary</option>
  <option value="sentenceboundary">Sentence Boundary</option>
  <option value="paragraphboundary">Paragraph Boundary</option>
  <option value="documentboundary">Document Boundary</option>
</select>

<br /><br />

<button>Extend selection</button>

JavaScript

let select = document.querySelector("select");
let button = document.querySelector("button");

button.addEventListener("click", modify);

function modify() {
  let selection = window.getSelection();
  selection.modify("extend", "forward", select.value);
}

Ergebnis

Spezifikationen

Specification
Selection API # dom-selection-modify

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Selection, das Interface, zu dem es gehört.