contenteditable div set cursor position at last in ment io

avatar
317    1 year ago

When we are type some text and after click on Add @ button cursor move to the start position please refer below html and java script code.I want to cursor at the last position whenever I click on Add @ button

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>
Answers { 1 }
avatar
1 year ago

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>

This will take the cursor just before the @