セットカーソル

Question

私は、タグが、その中スパンで置き換えられた単語を挿入したタグでテキストを...含む単純なコンテンツの編集可能な...

<div contenteditable=true> 
     text text text <span class="tag">tag</span> 
</div> 

これを持っています

次に、カーソルを編集可能なコンテンツの末尾に（スパン外に）順番に配置する必要があります（タグのテキストを含むスパンで置き換えられます）ユーザーが入力を続けることができるようにする...

私はcu終わりにはスパンの内側だけです...

私はランジーを使用しています。

Answer 1

これは

function moveCursorAtTheEnd(){ 
    var selection=document.getSelection(); 
    var range=document.createRange(); 
    var contenteditable=document.querySelector('div[contenteditable="true"]'); 

    if(contenteditable.lastChild.nodeType==3){ 
     range.setStart(contenteditable.lastChild,contenteditable.lastChild.length); 
    }else{ 
     range.setStart(contenteditable,contenteditable.childNodes.length); 
    } 
    selection.removeAllRanges(); 
    selection.addRange(range); 

    } 

Answer 2

これは、はるかに簡単な作品だけでなくhttps://gist.github.com/al3x-edge/1010364

function setEndOfContenteditable(contentEditableElement) 
{ 
    var range,selection; 
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ 
    { 
     range = document.createRange();//Create a range (a range is a like the selection but invisible) 
     range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range 
     range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
     selection = window.getSelection();//get the selection object (allows you to change selection) 
     selection.removeAllRanges();//remove any selections already made 
     selection.addRange(range);//make the range you have just created the visible selection 
    } 
    else if(document.selection)//IE 8 and lower 
    { 
     range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) 
     range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range 
     range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start 
     range.select();//Select the range (make it the visible selection 
    } 
} 

働くこと