Question

<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';"></div>

当我点击此框时，Firefox会选择文字。如果div不为空，则不选择文本。那是为什么？

Demo

Answer 1

我不知道原因是什么，但有一个简单的解决方案。在div中添加 。你的代码看起来像这样：

<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';">&nbsp;</div>

Demo

Answer 2

那可能是onclick。您可以尝试超时（免责声明：不建议使用内联代码）：

<div id="testDiv" style="float:left;width:100px;height:100px;border:1px solid black;" 
onclick="setTimeout(
  function() { 
    document.getElementById('testDiv').innerHTML = 'TEST';
  }
 ,10)"></div>

UPDATE：但是不是onclick - 似乎点击是由Fx缓存的并且在超时后仍然执行 - 我将留下答案以表明它不起作用：）

DEMO

Answer 3

这可能取决于浏览器选择处理的工作方式。如果你想象当你“点击”你在那个位置创建一个折叠选择（所有选择都有一个起点和终点） - 这个折叠的选择可能包含了div 的开头和结尾（从DOM的角度来看）。接下来，代码直接在div中注入一些内容，这些内容将选择结束点推到新文本之后......当浏览器重绘时，文本选择会神奇地出现。添加 可能意味着FireFox在其他地方放置了折叠选项，因此它不会包装div。

如果您曾经尝试过构建自己的基于浏览器的WYSIWYG编辑器，您就会知道整个选择过程对代码的复杂程度。

你可以通过使用.blur（）方法或FireFox的一些实际选择方法来解决同样的问题......虽然 方法很简单，但它很简单。

发现btw非常奇怪的错误;）

当我更改innerHTML时，为什么firefox会选择文本

3 个答案: