contenteditable div set cursor position at last in ment io

Question

contenteditable div set cursor position at last in ment io

395 views Asked by Pankaj Mukati At 21 December 2016 at 10:17

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>

Original Q&A

There are 2 answers

**Hemant Bagwan** · Answer 1 · 2016-12-21 10:28:47

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 @

**Hemant Bagwan** · Answer 2 · 2016-12-31 12:27:25

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>

TechQA.

contenteditable div set cursor position at last in ment io

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in DOM

Related Questions in MENTION

Popular Questions

Popular Tags

Trending Questions