Ustaw kursor po elemencie span w dziale contenteditable

Question

Jak ustawić kursor za elementem span wewnątrz elementu div? W tej chwili mam obraz wewnątrz elementu span, wewnątrz contenteditable div.

Po dodaniu niektórych znaków są one dodawane wewnątrz przęsła, ale chcę je dodać po elemencie span. Jakieś pomysły, jak mogę to osiągnąć?

Answer 1

W przeglądarkach innych niż IE < = 8, będzie to zrobić:

function placeCaretAfterNode(node) { 
    if (typeof window.getSelection != "undefined") { 
     var range = document.createRange(); 
     range.setStartAfter(node); 
     range.collapse(true); 
     var selection = window.getSelection(); 
     selection.removeAllRanges(); 
     selection.addRange(range); 
    } 
} 

Jednak niektóre przeglądarki (ones zwłaszcza opartych na silniku WebKit) mają stałe pomysłów, o których pozycjach w dokumencie obowiązują dla karetki i normalizuje każdy zakres dodawany do zaznaczenia, aby zachować zgodność z tymi pomysłami. Poniższy przykład będą robić to, co chcesz w Firefoksie i IE 9, ale nie w Chrome lub Safari w wyniku:

http://jsfiddle.net/5dxwx/

Żaden z obejścia są dobre. Dostępne są następujące opcje:

• dodać charakterem zerowej szerokości spacji po rozpiętości i wybierz ją
• użyć <a> elementu zamiast <span> ponieważ WebKit czyni wyjątek dla <a> elementów

Answer 2

Funkcja ta zarządza co miałem na myśli:

<script type="text/javascript"> 
function pasteHtmlAtCaret(char) { 
     var sel = rangy.getSelection(); 
     var range = sel.rangeCount ? sel.getRangeAt(0) : null; 
     var parent; 
     if (range) { 
      var parentEl = document.createElement("span"); 
     jQuery(parentEl).addClass('char').addClass('latest'); 
      parentEl.appendChild(range.createContextualFragment(char)); 

      // Check if the cursor is at the end of the text in an existing span 
      if (range.endContainer.nodeType == 3 
      && (parent = range.endContainer.parentNode) 
      && (parent.tagName == "SPAN")) { 
      range.setStartAfter(parent); 
      } 
      range.insertNode(parentEl); 
     if(jQuery(parentEl).parent().get(0).tagName.toLowerCase() == 'span'){ 
      var spanParent = jQuery(parentEl).parent('span'); 
      var parentEl = jQuery('<span class="char latest spanchild"></span>').insertAfter(spanParent).append(parentEl).get(0); 
     } 
     jQuery("span.spanchild").each(function(index, element){ 
      var content = jQuery(element).children('span.char').first().html(); 
      jQuery(element).children('span.char').remove(); 
      jQuery(element).html(content); 
      jQuery(element).removeClass('spanchild'); 
     }); 
      range.setStartAfter(parentEl); 
      rangy.getSelection().setSingleRange(range); 
     jQuery(parentEl).removeClass('latest'); 
     } 
} 
</script> 

Answer 3

Udało mi się rozwiązać ten problem za pomocą znacznika "a" &nbsp. Przykład: - "<a>"+ content/element you want to add +"</a>&nbsp;"

Answer 4

Wystarczy span.contentEditable = false do pracy rozwiązanie Tima należycie;)