contenteditable div内のspan要素の後にカーソルを設定

Question

contenteditable div内のspan要素の後にカーソルを設定するにはどうすればよいですか？ 今、contenteditable div内のspan要素内にイメージがあります。

いくつかの文字を追加すると、それらはスパンの内側に追加されますが、スパン要素の後ろに追加する必要があります。どのように私はこれを達成することができる任意のアイデア？ IE < = 8以外のブラウザで

Answer 1

が、これはそれを行います。

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); 
    } 
} 

をただし、一部のブラウザ（特にWebKitのベースのもの）は、ドキュメント内の位置は、キャレットのために有効であるかについての考えを修正しましたそれらのアイデアを遵守するために選択範囲に追加する範囲を正規化します。次の例では、FirefoxとIE 9ではなく、結果として、クロムまたはSafariでやりたいことになります。回避策の

http://jsfiddle.net/5dxwx/

どれも良いではありません。オプションは次のとおりです。

• スパン後にゼロ幅スペース文字を追加し、WebKitのは、この機能は、管理<a>要素

Answer 2

の例外を作るので、それ

ではなく<span>の<a>要素を使用して選択します私が念頭に置いていたこと：

<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

私はこの問題を 'a'タグで解決することができました&nbsp。 例： - 適切"<a>"+ content/element you want to add +"</a>&nbsp;"

Answer 4

だけspan.contentEditable = falseティムのソリューションの仕事に;）