Set Cursor vị trí sau khi lồng nhau contentEditable

Question

Tôi đã có đánh dấu này

<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> 

Các caret hiện đang trong khoảng thời gian .field.

Tôi cần chuyển nó trở lại sau số .field trong phụ huynh contentEditable.

Làm thế nào điều này có thể được thực hiện thông qua javascript (với việc sử dụng jQuery nếu cần)?

Nó sẽ cố gắng kích hoạt nó trên sự kiện keydown khi dấu mũ nằm trong khoảng .value như được hiển thị.

Answer 1

Một bản cập nhật cho câu trả lời trước. http://jsfiddle.net/GLzKy/4/

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

CẬP NHẬT

câu trả lời Cập nhật với câu trả lời đúng trong ý kiến ​​

Đối với di chuyển trực tiếp sau khi lĩnh vực hiện tại, bạn có thể muốn sử dụng range.setStartAfter và range.setEndAfter: http://jsfiddle.net/GLzKy/5

Answer 2

Tôi giả định rằng bạn muốn chuyển đến phần tiếp theo này. Để làm rõ, tôi đã thêm văn bản "Here!" trong một bản demo để cho bạn thấy rằng nó đi đến cùng.

Trong bản trình diễn bên dưới, nhấn Nhập khóa từ số .field .value để đi đến cùng.

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

Dưới đây là chức năng từ https://stackoverflow.com/a/4238971/297641 mà thực hiện tất cả công việc.

$('.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(); 
    } 
} 

Tested trong FF, IE8 và Chrome

tham khảo:https://stackoverflow.com/a/4238971/297641