設置光標在span元素內contenteditable div

如何設置光標在contenteditable div內的span元素之後？現在，我在span元素裏面有一個圖像，在contenteditable div裏面。設置光標在span元素內contenteditable div

當我添加一些字符時，它們被添加到範圍內，但我希望它們被添加到span元素之後。任何想法我可以如何實現這一目標？

2013-04-04 Laurens Schuitemaker

在比IE < = 8其他的瀏覽器，這將做到這一點：

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而不是在Chrome或Safari，結果想要什麼：

http://jsfiddle.net/5dxwx/

的解決方法都不是很好。選項包括：

跨度之後添加零寬度的空格字符，並選擇它
使用<a>元件代替<span>因爲WebKit的使得用於<a>元件

來源

2013-04-04 14:37:20

謝謝您的回答。我設法以另一種方式做到這一點。 – 2013-04-05 10:56:58

@halfer我不能：'投票需要15聲望'.. – 2013-04-22 06:35:36

@Laurens：對，你現在可以！ '：-p' – halfer 2013-04-22 08:53:24

此功能管理異常我想到的是：

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

來源

2013-04-05 10:58:33

+1，很高興看到自己的解決方案。 – halfer 2013-04-22 08:53:54

我設法解決這個問題，使用'a'標籤&nbsp。例子： - "<a>"+ content/element you want to add +"</a> "

來源

2016-06-02 13:45:05

只是span.contentEditable = false蒂姆解決方案正常工作;）

來源

2017-03-03 02:29:47

設置光標在span元素內contenteditable div

回答

相關問題