textarea selection start

by Dariusz Gardyński

HTML

<code contenteditable="true">row1._id===1</code>
<button>
test
</button>

JavaScript

$('button').click(function(event) {
  setCursor($('code')[0], 6);
});
$('code').keypress(function(event) {
  console.log(getCaretCharacterOffsetWithin(event.currentTarget));
});

function getCaretCharacterOffsetWithin(element) {
  let caretOffset = 0,
    doc = element.ownerDocument || element.document,
    win = doc.defaultView || doc.parentWindow,
    sel;

  if (typeof win.getSelection != "undefined") {
    sel = win.getSelection();
    if (sel.rangeCount > 0) {
      let range = win.getSelection().getRangeAt(0),
        preCaretRange = range.cloneRange();

      preCaretRange.selectNodeContents(element);
      preCaretRange.setEnd(range.endContainer, range.endOffset);
      caretOffset = preCaretRange.toString().length;
    }
  } else if ((sel = doc.selection) && sel.type != "Control") {
    let textRange = sel.createRange(),
      preCaretTextRange = doc.body.createTextRange();

    preCaretTextRange.moveToElementText(element);
    preCaretTextRange.setEndPoint("EndToEnd", textRange);
    caretOffset = preCaretTextRange.text.length;
  }
  return caretOffset;
}

function setCursor(el, pos) {
  var range = document.createRange();
  var sel = window.getSelection();
  range.setStart(el.childNodes[0], pos);
  range.collapse(true);
  sel.removeAllRanges();
  sel.addRange(range);
  el.focus();
}