如何可靠地 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() （取消選擇您的選擇）也可以正常工作。