Wie kann ich das Caret-Zeichen programmgesteuert in einem inhaltsbearbeitbaren Element positionieren?

Platzieren des Cursors an einer bestimmten Position in einem inhaltsbearbeitbaren Element

Beim Umgang mit inhaltsbearbeitbaren Elementen besteht die Möglichkeit, den Cursor (Caret) zu setzen. auf eine bestimmte Position kann entscheidend sein. Allerdings ist dies möglicherweise nicht einfach zu erreichen.

In den meisten Webbrowsern ist die Verwendung der Range- und Selection-Objekte der Schlüssel. Indem Sie jede Auswahlgrenze als Knoten und einen Versatz innerhalb dieses Knotens angeben, können Sie die Platzierung des Cursors steuern.

Betrachten Sie zur Veranschaulichung ein einfaches HTML-Beispiel mit einem inhaltsbearbeitbaren Div:

<div>

Stellen Sie sich nun vor, Sie möchten das Caretzeichen beim fünften Zeichen der zweiten Textzeile platzieren. Um dies zu erreichen, befolgen Sie diese Schritte:

1. Erstellen Sie ein Bereichsobjekt:

   var range = document.createRange();

2. Set die Auswahl Grenzen:

   var myDiv = document.getElementById("editable");
   range.setStart(myDiv.childNodes[2], 5);
   range.collapse(true);

   • myDiv.childNodes[2] bezieht sich auf die zweite Textzeile.
   • range.setStart() setzt den Anfang des Auswahlbereichs auf das fünfte Zeichen innerhalb dieses Knotens.
   • range.collapse(true) reduziert den Bereich auf ein Caretzeichen Position.

3. Auswahl festlegen:

   var sel = window.getSelection();
   sel.removeAllRanges();
   sel.addRange(range);

   • window.getSelection() gibt das Auswahlobjekt zurück.
   • sel.removeAllRanges() entfernt alle vorhandenen Auswahl.
   • sel.addRange(range) legt den neuen Auswahlbereich fest.

4. Funktion auslösen:
   Anhängen obiger Code zu einem Klickereignis auf der Schaltfläche:

   document.getElementById("button").addEventListener("click", setCaret);

Indem Sie diese Schritte befolgen, Sie können jetzt die Caret-Position innerhalb eines inhaltsbearbeitbaren Elements programmgesteuert festlegen.

Das obige ist der detaillierte Inhalt vonWie kann ich das Caret-Zeichen programmgesteuert in einem inhaltsbearbeitbaren Element positionieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!