如何可靠地选择焦点输入字段中的所有文本？答案

【问题标题】：How can I reliably select all text in an input field on focus?如何可靠地选择焦点输入字段中的所有文本？
【发布时间】：2021-04-27 01:53:46
【问题描述】：

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

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

编辑回复cmets：

我没有包含 sn-p，因为，几乎没有什么可显示的：

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

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

【问题讨论】：

见stackoverflow.com/questions/44718405/…
请给我们看一个演示问题的sn-p。
@ShivamJha - 这个问题是关于 React Native 的。
正如@AHaworth 所说，请使用minimal reproducible example 来更新您的问题，以展示问题，最好是使用堆栈片段（[<>] 工具栏按钮）的 runnable 问题。 Stack Snippets 支持 React，包括 JSX； here's how to do one.
@T.J.Crowder 哦，不，我的错，我打开了两个标签，一个用于RN，一个用于react

标签： javascript reactjs select onclick

【解决方案1】：

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

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

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

【讨论】：