Wie verschiebt man das Caretzeichen an das Ende eines inhaltsbearbeitbaren Elements?

Verschieben des Caretzeichens an das Ende einer inhaltsbearbeitbaren Entität

Bestimmte Web-Widgets, wie z. B. die Notizen von Gmail, erfordern die Möglichkeit, den Cursor dorthin zu bewegen das Ende eines inhaltsbearbeitbaren Elements. Es gibt zwar Lösungen für die Handhabung von Eingaben, bei inhaltsbearbeitbaren Elementen versagen diese jedoch aufgrund ihrer besonderen Natur.

Um diese Herausforderung zu bewältigen, ist eine Lösung erforderlich, die speziell auf inhaltsbearbeitbare Elemente zugeschnitten ist. Glücklicherweise gibt es eine umfassende Funktion, die diesen Bedarf erfüllt: setEndOfContenteditable(). Diese Funktion nutzt die umsichtige Verwendung von Bereichen und Auswahlen, um den Textinhalt des inhaltsbearbeitbaren Elements zu manipulieren und so die Kompatibilität mit verschiedenen Browsern sicherzustellen.

Implementierung:

Die Funktion setEndOfContenteditable() wird ausgeführt über verschiedene Browserversionen hinweg:

• Moderne Browser (Firefox, Chrome, Opera, Safari, IE 9 ):
  Verwendet die Methode createRange(), um einen unsichtbaren Bereich zu erstellen, der den gesamten Elementinhalt abdeckt. Anschließend wird Collapse() angewendet, um den Endpunkt des Bereichs auf das letzte Zeichen des Elements zu verschieben. Abschließend wird der Bereich zur aktuellen Auswahl hinzugefügt.
• IE 8 und niedriger:
  Verwendet die Methode createTextRange(), um einen unsichtbaren Bereich zu erstellen, der den gesamten Elementinhalt abdeckt. Auch hier wird die Methode collap() angewendet, um den Endpunkt des Bereichs am Ende des Elements zu positionieren. Abschließend wird der Bereich ausgewählt und damit zur neuen sichtbaren Auswahl.

Verwendung:

Um die Funktion setEndOfContenteditable() zu verwenden, rufen Sie einfach das Zielelement ab und wenden Sie es an:

elem = document.getElementById('txt1'); // Element to move the caret to the end of
setEndOfContenteditable(elem);

Diese Technik verschiebt die Einfügemarke effizient an das Ende eines inhaltsbearbeitbaren Elements, unabhängig von der Browserversion oder dem Elementinhalt Länge.

Das obige ist der detaillierte Inhalt vonWie verschiebt man das Caretzeichen an das Ende eines inhaltsbearbeitbaren Elements?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!