如何可靠地 select 输入字段中的所有文本聚焦？

Question

从本质上讲，您在点击选择内容时找到的基本内容是有效的，但对我来说，它并不可靠。 当我第一次单击输入元素时，所有文本都被选中。 如果我单击它，然后再次单击它，它会选择文本，然后立即取消选择它并在我单击的位置显示 cursor。 这是一个重复的模式，即它工作一次，然后不工作一次，等等。

我尝试使用preventDefault和stopImmediatePropagation阻止任何事情，我尝试在onMouseUp中返回 false ，但我无法摆脱这种行为。 是什么导致第 n * 2 次点击取消选择，我该如何防止它？

---

编辑回复评论：

我没有包含一个片段，因为，几乎没有什么可显示的：

<input type="text" value="-:--" onFocus={((e) => e.target.select())} />

仅此而已，这引起了我的问题。 但与此同时，我开始寻找处理这个问题的替代方法，我偶然发现了一些可能相关的东西：如果我点击输入 window，文本不会被取消选择。 如果我单击输入并在控制台中调用document.getSelection().toString() ，它会按预期打印-:-- 。 但是，如果我然后单击页面上的其他位置，取消选择输入字段，并再次调用document.getSelection().toString() ，它仍然会打印-:-- 。 这给了我足够的信息来弄清楚问题是什么以及如何解决它，所以我会添加我自己的答案。

Answer 1

TL;博士：
要么在onBlur / onFocusOut中调用document.getSelection().empty() ，要么确保您没有在所有内容上设置user-select: none 。

解释
事实证明，我遇到的问题是由于在整个body上设置了user-select: none引起的，这阻止了输入字段中文本的实际取消选择。 尽管文本看起来确实被取消选择了（蓝色突出显示消失了），但调用document.getSelection().toString()表明该文本仍然被选中。

由于在 body 上设置user-select: none非常激进，我怀疑大多数人会建议您不要这样做，并且更具体。 但是，如果您仍想将其保留在正文上，则在onBlur / onFocusOut事件中调用document.getSelection().empty() （取消选择您的选择）也可以正常工作。