contenteditable div最後にカーソル位置を設定する

テキストを入力した後にをクリックすると、@ボタンのカーソルが開始位置に移動します。以下のhtmlとjavaスクリプトコードを参照してください。私はをクリックしたときに位置がボタンcontenteditable div最後にカーソル位置を設定する

function insertUser(){ 
 
    jQuery("#htmlContent").append(" @"); \t   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>

出典

2016-12-21 Pankaj Mukati

Javaスクリプトコード –

[この助けることができる]（http://stackoverflow.com/questions/上の警告は無視してください511088/use-javascript-to-place-cursor-end-of-text-in-text-input-element） –

このリンクを参照していますが、解決策はまだありません[http：// stackoverflow。 com/questions/4233265/contenteditable-set-caret-the-end-of-the-text-cross-browser） –

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

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

 
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>

@追加します

これはちょうど、@の前にカーソルがかかります

出典

2016-12-21 10:28:47

ありがとう@Hemant Bagwan fまたはコメントが、私は最後にカーソル位置をしたい –

@ PankajMukati私はそれに取り組んでいます。 –

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

 
function insertChar(char) { 
 
     var range = window.getSelection().getRangeAt(0); 
 
     var sel = window.getSelection(); 
 
     if (range.startContainer.nodeType === Node.TEXT_NODE) { 
 
\t \t \t 
 
      //~ range.startContainer.insertData(range.endOffset, char); 
 
\t \t \t var textNode = document.createTextNode(char); 
 
\t \t \t range.insertNode(textNode); 
 
\t \t \t 
 
\t \t \t range.setStart(textNode,1); 
 
\t \t \t range.setEnd(textNode,1); 
 
\t \t \t sel.removeAllRanges(); 
 
\t \t \t 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>

出典

2016-12-31 12:27:25

はいそれは働いています。 –

contenteditable div最後にカーソル位置を設定する

答えて

関連する問題