Wie erhalte ich die zeichenbasierte Caret-Position in einem Textbereich?

Ermitteln der zeichenbasierten Caret-Position in Textarea

Das Bestimmen der Caret-Position in einem Textarea-Element kann eine Herausforderung sein, insbesondere wenn die genaue Suche erfolgt Spaltenindex in Zeichen. Hier ist eine Aufschlüsselung, wie Sie dies erreichen können:

Für Firefox und Safari

Gecko-basierte Browser wie Firefox und Safari stellen nahtlos die Eigenschaft „selectionStart“ für Textbereiche bereit. Diese Eigenschaft stellt die Position des Caretzeichens in Zeichen vom Anfang des Elements dar.

Für Internet Explorer

Leider bietet Internet Explorer keinen direkten Zugriff auf das Caretzeichen Position. Stattdessen müssen Sie auf einen komplexeren Ansatz zurückgreifen:

• Auswahlbereich erstellen: Verwenden Sie createRange(), um ein Auswahlbereichsobjekt zu generieren.
• Auswahl duplizieren: Erstellen Sie zu Vergleichszwecken ein Duplikat des Auswahlbereichs.
• Verschieben Auswahlgrenze: Ändern Sie die Duplikatauswahl so, dass am Anfang des Elementtexts ein Zeilenumbruchzeichen eingefügt wird.
• Auswahllänge vergleichen: Subtrahieren Sie die Länge der Duplikatauswahl von der Originalauswahl Länge, um die Position des Cursors zu bestimmen.

Vollständiger Code Beispiel

Der folgende JavaScript-Code zeigt, wie die Caret-Position in Zeichen abgerufen wird:

function getCaret(el) {
  if (el.selectionStart) {
    return el.selectionStart;
  } else if (document.selection) {
    el.focus();

    var r = document.selection.createRange();
    if (r == null) {
      return 0;
    }

    var re = el.createTextRange(),
        rc = re.duplicate();
    re.moveToBookmark(r.getBookmark());
    rc.setEndPoint('EndToStart', re);

    return rc.text.length;
  }
  return 0;
}

Beispielverwendung

Sie können verwenden Diese Funktion sieht folgendermaßen aus:

const textarea = document.getElementById('my-textarea');
const caretPosition = getCaret(textarea);

Umgebung abrufen Zeichenfolgen

Um die Zeichenfolgen rund um den Cursor oder die Auswahl zu erhalten, können Sie die Funktion substring() nutzen, um den Text vor, während und nach der Auswahl zu extrahieren.

Das obige ist der detaillierte Inhalt vonWie erhalte ich die zeichenbasierte Caret-Position in einem Textbereich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!