JavaScript: Caret Position setzen und auslesen

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();
  }
}