contentEditable javascript caret placement in div [英] contentEditable javascript caret placement in div

问题描述

我有一个 contentEditable div。

我们假设用户点击了一个按钮，区域。

因此，他们单击一个按钮，并将以下内容添加到<$ c $的 innerHTML c> contentEditable div：

 < div id =outside>< div id =inside>< / div>< / div> 
  

如何自动将光标（即插入符号）放入insidediv？
更差。

  var range = document.body.createTextRange（）; 
 range.moveToElementText（document.getElementById（'inside'））; 
 
 range.select（）; 
  

对于Mozilla：

  var range = document.createRange（）; 
 range.selectNodeContents（document.getElementById（'inside'））; 
 
 var selection = window.getSelection（）; 
 selection.removeAllRanges（）; 
 selection.addRange（range）; 
  

理论上，Mozilla版本也应该在Webkit和Opera中工作。实际上Webkit选择什么，Opera选择整个页面。叹。这仍然不是受到很好支持的地区。

I have a contentEditable div.

Let's say the user clicks a button that inserts HTML into the editable area.

So, they click a button and the following is added to the innerHTML of the contentEditable div:

<div id="outside"><div id="inside"></div></div>

How do I automatically place the cursor (ie caret) IN the "inside" div? Worse. How can this work in IE and FF?

解决方案

For IE:

var range= document.body.createTextRange();
range.moveToElementText(document.getElementById('inside'));

range.select();

For Mozilla:

var range= document.createRange();
range.selectNodeContents(document.getElementById('inside'));

var selection= window.getSelection();
selection.removeAllRanges();
selection.addRange(range);

In theory the Mozilla version should also work in Webkit and Opera. In practice Webkit selects nothing and Opera selects the whole page. Sigh. This is still not well-supported territory.

这篇关于contentEditable javascript caret placement in div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！