javascript - Chrome 上 contenteditable div 内的插入符号

Question

我正在使用一个可合并的 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("<%=innerDiv.ClientID %>").innerHTML = "a";显示插入符号。

有什么想法吗？谢谢!

Answer 1

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