pozycja przesuwać kursor po zagnieżdżonego contentEditable

Question

Mam ten Markup

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

The daszek jest obecnie w przedziale .field.

Muszę go przenieść z powrotem po.field w rodzica contentEditable.

Jak można to osiągnąć poprzez javascript (przy użyciu jQuery, jeśli to konieczne)?

Będzie próbowała wyzwolić go na zdarzeniu kluczowym, gdy karetka znajduje się w polu .value, jak pokazano.

Answer 1

Aktualizacja poprzedniej odpowiedzi. http://jsfiddle.net/GLzKy/4/

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

UPDATE

Updated odpowiedź z prawidłową odpowiedź w komentarzach

do przenoszenia bezpośrednio po zakończeniu bieżącego pola, można użyć range.setStartAfter i range.setEndAfter: http://jsfiddle.net/GLzKy/5

Answer 2

Zakładam, że chcesz przejść do następnej sekcji. Aby było jasne, dodałem tekst "Tutaj!" w demo, aby pokazać, że idzie do końca.

W poniższej prezentacji naciśnij Wprowadź klucz z .field .value, aby przejść do końca.

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

Poniżej znajduje się funkcja od https://stackoverflow.com/a/4238971/297641 który faktycznie wykonuje całą pracę.

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

Testowany w FF, IE8 i Chrome

referencyjny:https://stackoverflow.com/a/4238971/297641