Как вставить строку в позицию курсора

Question

Я работал над вставкой строки в позицию курсора. Я использую образец, взятый из , здесь .
Моя проблема в том, что добавляемая строка перескакивает в конец текстового поля. Он не остается на месте курсора. Что может быть причиной ? Может ли проблема возникать из Mozilla Firefox?

  function insertAtCursor(myField, myValue){
    //IE support
    if (document.selection) {
        myField.focus();
        sel = document.selection.createRange();
        sel.text = myValue;
    }
    // Microsoft Edge
    else if(window.navigator.userAgent.indexOf("Edge") > -1) {
      var startPos = myField.selectionStart; 
      var endPos = myField.selectionEnd; 

      myField.value = myField.innerHTML.substring(0, startPos)+ myValue 
             + myField.innerHTML.substring(endPos, myField.innerHTML.length); 

      var pos = startPos + myValue.length;
      myField.focus();
      myField.setSelectionRange(pos, pos);
    }
    //MOZILLA and others
    else if (myField.selectionStart || myField.selectionStart == '0') {
        var startPos = myField.selectionStart;
        var endPos = myField.selectionEnd;
        myField.value = myField.innerHTML.substring(0, startPos)
            + myValue
            + myField.innerHTML.substring(endPos, myField.innerHTML.length);
    } else {
        myField.innerHTML += myValue;
    }
}

вот часть html.

<button onclick="add_str()">
add srting
</button>
<script>
function add_str(){
    var elt = document.getElementById("text_write");
    insertAtCursor(elt, "ADD THIS VALUE");
}
</script>
<div contenteditable="true" id="text_write" style="height:200px; width:500px; border:2px solid black;"></div>

заранее спасибо.

Answer 1

Я бы просто использовал setRangeText или execCommand

function add_str(event) {
  event.preventDefault()
  var elt = document.getElementById("text_write");
  insertAtCursor(elt, "ADD THIS VALUE");
}

function insertAtCursor(myField, myValue) {
  if (myField.setRangeText) {
    myField.setRangeText(myValue)
  } else {
    document.execCommand('insertText', false, myValue);
  }
}

<button onmousedown="add_str(event)">
add srting
</button>

<div contenteditable="true" id="text_write" style="height:200px; width:500px; border:2px solid black;">Hello World</div>