Wie platziere ich das Caret-Zeichen am Ende eines Texts in einem inhaltsbearbeitbaren Element in allen Browsern?

Einfügen von Zeilenumbrüchen und Festlegen der Einfügemarke am Textende browserübergreifend

Einführung

Das Einfügen von Zeilenumbrüchen und das Festlegen der Einfügemarke am Textende kann je nach Browser unterschiedlich sein . In diesem Artikel wird eine browserübergreifende Lösung untersucht, um das Einfügezeichen am Textende zu setzen, wenn auf eine Schaltfläche geklickt wird.

Problem

In verschiedenen Browsern wie Chrome, Firefox und IE, die Art und Weise, wie Text in einem inhaltsbearbeitbaren Element gespeichert und angezeigt wird unterscheidet sich. Dies kann zu unerwünschten Zeilenumbrüchen oder Formatierungen führen.

Außerdem erfordert das Festlegen der Caret-Position am Ende des Textes nach einem Klick auf eine Schaltfläche einen einheitlichen Ansatz in allen Browsern.

Lösung

Die folgende JavaScript-Funktion bietet eine browserübergreifende Lösung, um das Caret am Ende des zu platzieren text:

function placeCaretAtEnd(el) {
  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
  } else if (typeof document.body.createTextRange != "undefined") {
    var textRange = document.body.createTextRange();
    textRange.moveToElementText(el);
    textRange.collapse(false);
    textRange.select();
  }
}

Die Funktion nimmt einen Verweis auf das inhaltsbearbeitbare Element (el) als Eingabe. Es prüft, ob die Methoden getSelection und createRange in modernen Browsern vorhanden sind. Falls verfügbar, erstellt es einen Bereich, wählt den gesamten Inhalt des Elements aus, reduziert den Bereich bis zum Ende und legt die Auswahl fest.

Für ältere Browser, denen diese Methoden fehlen, verwendet die Funktion die Methode createTextRange, um dies zu erreichen der gleiche Effekt.

Um diese Funktion zu verwenden, sollte sie aufgerufen werden, wenn auf die Schaltfläche geklickt wird, etwa so:

$(document).ready(function() {
  $('#insert_caret').click(function() {
    var ele = $('#content');
    placeCaretAtEnd(ele);
  });
});

Das obige ist der detaillierte Inhalt vonWie platziere ich das Caret-Zeichen am Ende eines Texts in einem inhaltsbearbeitbaren Element in allen Browsern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!