Caret里面的Chrome上的contenteditable div

I am using a conteneditable div control and when the user first clicks inside this control I want to delete all text and position the caret at the beginning. So far my code is working on IE, Opera and Firefox, but on Chrome it seems that the caret does not show up where I am trying to set it. My code is as follows:

我正在使用可竞争的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);
   }
}

Deleting the text makes the caret completely disappear on Chrome. However, the weird thing is that if instead of setting the innerHTML for the div to the empty string I specify some text, like document.getElementById("<%=innerDiv.ClientID %>").innerHTML = "a"; the caret is displayed.

删除文本会使插入符号在Chrome上完全消失。然而，奇怪的是，如果不是将div的innerHTML设置为空字符串，而是指定一些文本，例如document.getElementById（“<％= innerDiv.ClientID％>”）。innerHTML =“a”;显示插入符号。

Any ideas why? Thanks!

有什么想法吗？谢谢！

2 个解决方案

#1

Set the style of your inner container to display:inline or display:inline-block or use a SPAN instead of a DIV. DIV elements are displayed as 'block' per default and Chrome does not show the caret in content-editable block elements without text content.

设置要显示的内部容器的样式：内联或显示：内联块或使用SPAN而不是DIV。默认情况下，DIV元素显示为“阻止”，Chrome不会在没有文本内容的内容可编辑块元素中显示插入符号。

#2

I've had a problem with a caret not showing up in empty lines on Chrome in contenteditable and a not-so-sexy fix I figured out was to place a div inside the contenteditable div and make all of the edits in that one. For some reason, the caret does show up then. But, of course, that div can be "accidentally" deleted by the user.

我有一个问题，一个插入符号没有出现在Chrome上的空行中，这是一个不可思议的解决方案，我想到的是将div放在contenteditable div中，然后对其进行所有编辑。出于某种原因，插入符确实出现了。但是，当然，用户可以“意外”删除该div。

Chrome seems to have a bunch of these bugs.

Chrome似乎有一堆这些错误。