Wie kann der Inhalt im Eingabefeld automatisch vorwärts bewegt werden, nachdem der Cursor in JS gelöscht wurde?

Bei der Entwicklung von Webanwendungen stoßen Sie häufig auf Szenarien, in denen Sie den Inhalt des Eingabefelds bedienen müssen. Darunter ist es eine häufige, aber auch anspruchsvolle Anforderung, den Inhalt im Eingabefeld nach dem Löschen des Cursors automatisch nach vorne zu verschieben.

In diesem Artikel stellen wir zwei Methoden vor, um diese Anforderung zu erfüllen: Eine besteht darin, die Auswahl-API von JavaScript zu verwenden, um Textoperationen durchzuführen, und die andere darin, den Inhalt im Eingabefeld durch Simulation von Tastaturereignissen automatisch nach vorne zu verschieben.

Verwenden Sie die Auswahl-API zur Textbearbeitung.

Die Auswahl-API ist eine von JavaScript bereitgestellte Textbearbeitungs-API, mit der Sie den ausgewählten Textteil des Dokuments abrufen und bearbeiten können. Bei dieser Methode verwenden wir die Auswahl-API, um das Löschen und Kopieren von Textinhalten zu implementieren.

Zuerst müssen wir den DOM-Knoten des Eingabefelds abrufen und einen Keydown-Ereignis-Listener daran binden, um auf Tastaturereignisse zu warten. Wenn der Benutzer die Rücktaste oder die Entf-Taste drückt, führen wir die folgenden Vorgänge aus:

1. Verwenden Sie die Methode document.getSelection(), um den aktuell ausgewählten Text abzurufen.
2. Wenn der ausgewählte Text leer ist, bedeutet dies, dass ein Zeichen vor dem Der Cursor soll gelöscht werden. Die Methode „modify()“ der Auswahl-API setzt den Auswahlbereich auf „erweitert“ zurück (d. h. den Text zwischen der aktuellen Cursorposition und der Position des vorherigen Zeichens) und verwendet dann die Methode „modify(“ ) Methode erneut, um den Auswahlbereich auf „Verschieben“ zurückzusetzen (Das heißt, die Zeichen vor dem Cursor löschen)
3. Andernfalls bedeutet dies, dass der Benutzer einen Teil des Textes ausgewählt hat, den ausgewählten Text in die Zwischenablage kopiert und festgelegt hat
4. Aktualisieren Sie abschließend den Wert des Eingabefelds und bewegen Sie den Cursor an die richtige Position

Das Folgende ist eine vollständige Implementierung:

const inputField = document.getElementById('input-field');

inputField.addEventListener('keydown', (event) => {
  const selection = document.getSelection();

  if (event.key === 'Backspace' || event.key === 'Delete') {
    const selectedText = selection.toString();

    if (selectedText === '') {
      selection.modify('extend', 'backward', 'character');
      selection.modify('move', 'backward', 'character');
    } else {
      event.clipboardData.setData('text/plain', selectedText);
      selection.deleteFromDocument();
    }

    event.preventDefault();
    inputField.value = inputField.value.substring(0, selection.anchorOffset) + 
                       inputField.value.substring(selection.focusOffset);
    selection.setPosition(selection.anchorNode, selection.anchorOffset);
  }
});

Verwenden Sie simulierte Tastaturereignisse zur Implementierung

Die zweite Implementierungsmethode besteht darin, das Keydown-Ereignis des Eingabefelds auszulösen, indem Tastaturereignisse simuliert werden, sodass es automatisch vorwärts geht. Diese Methode erfordert nicht die Verwendung der Auswahl-API und funktioniert in allen Browsern.

Zuerst müssen wir ein simuliertes Tastaturereignis erstellen, um zu simulieren, dass der Benutzer die Rücktaste oder die Entf-Taste drückt. Lösen Sie als Nächstes das Keydown-Ereignis im Eingabefeld aus und führen Sie die folgenden Vorgänge im Ereignis-Listener aus:

1. Verwenden Sie die Eigenschaften „selectionStart“ und „selectionEnd“, um den aktuell ausgewählten Textbereich abzurufen. Wenn kein Text ausgewählt ist, sind „selectionStart“ und „selectionEnd“ gleich
2. Beurteilen Sie, ob der Benutzer die Taste unter „Rücktaste“ oder „Löschen“ gedrückt hat. Wenn es sich um „Rücktaste“ handelt, verringern Sie „selectionStart“ um 1, andernfalls erhöhen Sie „selectionEnd“ um 1. Aktualisieren Sie den Wert des Eingabefelds und setzen Sie „selectionStart“ und „selectionEnd“ entsprechend der aktuellen Cursorposition zurück
3. Der Implementierungscode lautet wie folgt:

const inputField = document.getElementById('input-field');

document.addEventListener('keydown', (event) => {
  const selectionStart = inputField.selectionStart;
  const selectionEnd = inputField.selectionEnd;

  if (event.key === 'Backspace') {
    inputField.value = inputField.value.substring(0, selectionStart - 1) + 
                       inputField.value.substring(selectionEnd);
    inputField.selectionStart = selectionStart - 1;
    inputField.selectionEnd = selectionStart - 1;
    event.preventDefault();
  } else if (event.key === 'Delete') {
    inputField.value = inputField.value.substring(0, selectionStart) + 
                       inputField.value.substring(selectionEnd + 1);
    inputField.selectionStart = selectionStart;
    inputField.selectionEnd = selectionStart;
    event.preventDefault();
  }
});

Zusammenfassung

In diesem Artikel werden zwei Methoden zur Implementierung von JavaScript vorgestellt, um den Inhalt im Eingabefeld nach dem Löschen des Cursors automatisch nach vorne zu verschieben. Die erste Methode verwendet die Auswahl-API von JavaScript, um Textoperationen durchzuführen, und die zweite Methode wird durch die Simulation von Tastaturereignissen implementiert. Beide Methoden haben ihre eigenen Vor- und Nachteile. Wählen Sie sie entsprechend den tatsächlichen Anforderungen und der Browserkompatibilität.

Das obige ist der detaillierte Inhalt vonWie kann der Inhalt im Eingabefeld automatisch vorwärts bewegt werden, nachdem der Cursor in JS gelöscht wurde?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!