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（“＆lt;％= innerDiv.ClientID％＆gt;”）。innerHTML =“a”;显示插入符号。

任何想法为什么？谢谢！

Answer 1

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

Answer 2

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

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

Caret里面的Chrome上的contenteditable div

2 个答案: