为什么火狐在我更改 innerHTML 时会选择文本

Why does firefox select the text when I change innerHTML

本文关键字：选择 文本 innerHTML 火狐 为什么      更新时间：2023-09-26
<div style="float:left;width:100px;height:100px;border:1px solid black;" onclick="this.innerHTML = 'TEST';"></div>

当我点击这个框时，火狐会选择文本。如果div 不为空，则不会选择文本。为什么？

演示

我不知道

原因是什么，但有一个简单的解决方案。在div 中放一个&nbsp;。您的代码如下所示：

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

演示

这可能是点击。您可以尝试超时(免责声明：不建议使用内联代码(：

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

更新：但不是点击 - 似乎点击被 Fx 缓存并在超时后仍然执行 - 我将留下答案以表明它不起作用:)

演示

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

如果您曾经尝试过构建自己的基于浏览器的所见即所得编辑器，您就会知道整个选择过程对编码有多复杂。

你可以通过使用.blur((方法或FireFox的一些实际选择方法来解决同样的问题。尽管&nbsp;方法在简单性方面很优雅。

发现顺便说一句;)非常奇怪的错误

相关文章：