後嵌套CONTENTEDITABLE

Question

我有了這個標記

<div contentEditable="true"> 
    Some other editable content 
    <div class="field" contentEditable="false"> 
     <span class="label">This is the label</span> 
     <span class="value" contentEditable="true">This is where the caret is</span> 
    </div> 
    <!-- This is where I want the Caret --> 
</div> 

插入符號設置光標位置目前在.field跨度。

我需要將其移回後.field在父contentEditable。

如何（如果需要與使用jQuery的）這個實現通過JavaScript？

當插入符號位於.value跨度時，它將嘗試在keydown事件上觸發它，如圖所示。

Answer 1

到以前的答案更新。 http://jsfiddle.net/GLzKy/4/

placeCaretAtEnd($(this).parent().nextAll('.field').children('value')); 

UPDATE

在評論

對於目前的後場直接動正確答案更新的答案，你可能想使用range.setStartAfter和range.setEndAfter： http://jsfiddle.net/GLzKy/5

Answer 2

我假設你想要進入下一節。爲了說清楚，我添加了一個文字「Here！」在演示中告訴你它確實走到了盡頭。

在下面的演示中，按從.field .value輸入鍵即可結束。

DEMO：http://jsfiddle.net/GLzKy/1/

下面是https://stackoverflow.com/a/4238971/297641功能實際上做所有的工作。

$('.field .value').keydown(function (e) { 
    if (e.which == 13) { //Enter Key 
     e.preventDefault();    
     placeCaretAtEnd($(this).closest('.parent')[0]); 
    } 
}); 

/** 
    This below function is from https://stackoverflow.com/a/4238971/297641 
    All credits goes to the original author. 
*/ 
function placeCaretAtEnd(el) { 
    el.focus(); 
    if (typeof window.getSelection != "undefined" 
      && typeof document.createRange != "undefined") { 
     var range = document.createRange(); 
     range.selectNodeContents(el); 
     range.collapse(false); 
     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(false); 
     textRange.select(); 
    } 
} 

測試在FF，IE8和Chrome

參考：https://stackoverflow.com/a/4238971/297641