Chrome 上 contenteditable div 中的插入符号答案

【问题标题】：Caret inside contenteditable div on ChromeChrome 上 contenteditable div 中的插入符号
【发布时间】：2013-01-11 17:44:53
【问题描述】：

我正在使用可竞争的 div 控件，当用户第一次在此控件内单击时，我想删除所有文本并将插入符号放在开头。到目前为止，我的代码在 IE、Opera 和 Firefox 上运行，但在 Chrome 上，插入符号似乎没有显示在我试图设置它的位置。我的代码如下：

<div id="mydiv" runat="server" contenteditable="true">
   <div id="innerDiv" runat="server">
       <span onclick="javascript:DisableClick();">text I want to delete on first click</span>
   </div>
</div>

function DisableClick()
{
   document.getElementById("<%=innerDiv.ClientID %>").innerHTML = "";
   if(document.createRange)
   {
      var range = document.createRange();
      range.selectNodeContents(document.getElementById("<%=innerDiv.ClientID %>"));
      range.collapse(false);
      var selection = window.getSelection();
      selection.removeAllRanges();
      selection.addRange(range);
   }
}

删除文本会使插入符号在 Chrome 上完全消失。然而，奇怪的是，如果我没有将 div 的 innerHTML 设置为空字符串，而是指定了一些文本，例如 document.getElementById("").innerHTML = "a";将显示插入符号。

任何想法为什么？谢谢！

【问题讨论】：

小提琴：jsfiddle.net/gsEXa

标签： javascript html google-chrome contenteditable caret

【解决方案1】：

将内部容器的样式设置为 display:inline 或 display:inline-block 或使用 SPAN 而不是 DIV。 DIV 元素默认显示为“块”，Chrome 不会在没有文本内容的内容可编辑块元素中显示插入符号。

【讨论】：

我使用了带有“display:inline”属性和插入符号可见的跨度，但是在不可见的跨度插入符号上应用“背景颜色”之后。

【解决方案2】：

我在contenteditable 的 Chrome 上的空行中没有出现插入符号的问题，我发现一个不太性感的修复方法是在 contenteditable div 中放置一个 div 并制作所有那个编辑。出于某种原因，插入符号确实出现了。但是，当然，该 div 可能会被用户“意外”删除。

Chrome 似乎有很多这样的错误。

【讨论】：