JavaScript: Caret Position setzen und auslesen

Veröffentlicht von Sascha am

Das Setzen oder Auslesen der Cursor (Caret) Position in einem HTML-Textfeld wie textarea oder input stellt sich als nicht ganz so einfache Aufgabe dar.
jQuery hilft uns an dieser Stelle (ohne die Verwendung diverser Plugins) leider auch nicht weiter.

Daher hier eine „pure JavaScript“ Funktion, jeweils zum Setzen und Auslesen der Caret Position. Getestet im Chrome, Safari, Firefox und Internet Explorer 7, 8, 9, 10.

JavaScript Version zum Auslesen der aktuellen Caret Position in einem Textfeld.

// Aufruf
var pos = getCaretPos(document.getElementById('myId')); // pure JS
var pos = getCaretPos($('#myId')[0], 10);  // jQuery

// Definition
function getCaretPos(domElem) {
  var pos;

  if (document.selection) {
      domElem.focus();
      var sel = document.selection.createRange();
      sel.moveStart('character', - domElem.value.length);
      pos = sel.text.length;
  }
  else if (domElem.selectionStart || domElem.selectionStart == '0') {
      pos = domElem.selectionStart;
  }
  return pos;
}

JavaScript Funktion zum Setzen der Caret Position in einem Textfeld. Übergabeparameter sind das DOM-Element sowie die gewünschte Position des Cursors.

// Aufruf
setCaretPos(document.getElementById('myId'), 10); // pure JS
setCaretPos($('#myId')[0], 10);  // jQuery

// Definition
function setCaretPos(domElem, pos) {
  if(domElem.setSelectionRange) {
    domElem.focus();
    domElem.setSelectionRange(pos, pos);
  }
  else if (domElem.createTextRange) {
    var range = domElem.createTextRange();
    range.collapse(true);
    range.moveEnd('character', pos);
    range.moveStart('character', pos);
    range.select();
  }
}
Kategorien: JavaScript

Kommentar verfassen

%d Bloggern gefällt das:

Durch das Fortsetzen der Benutzung dieser Seite, stimmst du der Benutzung von Cookies zu. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anbieten zu können und die Zugriffe auf unsere Website zu analysieren. Außerdem geben wir Informationen zu Ihrer Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter.

Schließen