contenteditable div 最后在ment io中设置光标位置答案

【问题标题】：contenteditable div set cursor position at last in ment iocontenteditable div 最后在ment io中设置光标位置
【发布时间】：2017-05-06 17:38:00
【问题描述】：

当我们输入一些文本并点击添加@按钮后光标移动到起始位置请参考下面的html和java脚本代码。我想在点击时将光标定位在最后一个位置添加@按钮

function insertUser(){
  jQuery("#htmlContent").append(" @");	          placeCaretAtEnd(document.getElementById("htmlContent"));
}


function placeCaretAtEnd(el) {

  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(true);
    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(atStart);
    textRange.select();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <body>

    <div contenteditable mentio
         mentio-typed-term="typedTerm"
         mentio-macros="macros"
         mentio-require-leading-space="true"
         mentio-select-not-found="true"
         class="editor form-control"
         mentio-id="'htmlContent'"
         id="htmlContent"
         ng-model="htmlContent"
         ng-keyup="htmlContentKeyUp($event)"
         type="text" 

         onkeypress="return (this.innerText.length <= 300)" 
         style="height:60px; overflow-y:hidden;    border: 2px solid black;"
         >
    </div>

    <button aria-label="menu" onclick="insertUser()">Add @</button>
  </body>
</html>

【问题讨论】：

请忽略有关 java 脚本代码的警告
this can help
我们已经参考了这个链接，但仍然没有得到任何解决方案link

标签： javascript jquery html dom mention

【解决方案1】：

function insertUser(){
  jQuery("#htmlContent");	          //placeCaretAtEnd(document.getElementById("htmlContent"));
  insertChar('@');
}

function insertChar(char) {
			var range = window.getSelection().getRangeAt(0);
			//console.log(range);
			if (range.startContainer.nodeType == Node.TEXT_NODE) {
				range.startContainer.insertData(range.endOffset, char);
			}
		}

function placeCaretAtEnd(el) {

  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(true);
    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(atStart);
    textRange.select();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <body>

    <div contenteditable mentio
         mentio-typed-term="typedTerm"
         mentio-macros="macros"
         mentio-require-leading-space="true"
         mentio-select-not-found="true"
         class="editor form-control"
         mentio-id="'htmlContent'"
         id="htmlContent"
         ng-model="htmlContent"
         ng-keyup="htmlContentKeyUp($event)"
         type="text" 

         onkeypress="return (this.innerText.length <= 300)" 
         style="height:60px; overflow-y:hidden;    border: 2px solid black;"
         >
    </div>

    <button aria-label="menu" onclick="insertUser()">Add @</button>
  </body>
</html>

这会将光标放在@之前

【讨论】：

感谢@Hemant Bagwan 的评论，但我希望光标位于最后

【解决方案2】：

function insertUser(){
  insertChar('@');
}

function insertChar(char) {
        var range = window.getSelection().getRangeAt(0);
        var sel = window.getSelection();
        if (range.startContainer.nodeType === Node.TEXT_NODE) {
			
            //~ range.startContainer.insertData(range.endOffset, char);
			var textNode = document.createTextNode(char);
			range.insertNode(textNode);
			
			range.setStart(textNode,1);
			range.setEnd(textNode,1);
			sel.removeAllRanges();
			sel.addRange(range);
        }
        jQuery("#htmlContent").focus();

    }

function placeCaretAtEnd(el) {

  el.focus();
  if (typeof window.getSelection != "undefined"
      && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(true);
    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(atStart);
    textRange.select();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <body>

    <div contenteditable mentio
         mentio-typed-term="typedTerm"
         mentio-macros="macros"
         mentio-require-leading-space="true"
         mentio-select-not-found="true"
         class="editor form-control"
         mentio-id="'htmlContent'"
         id="htmlContent"
         ng-model="htmlContent"
         ng-keyup="htmlContentKeyUp($event)"
         type="text" 

         onkeypress="return (this.innerText.length <= 300)" 
         style="height:60px; overflow-y:hidden;    border: 2px solid black;"
         >
    </div>

    <button aria-label="menu" onclick="insertUser()">Add @</button>
  </body>
</html>

【讨论】：