將焦點設置到輸入字段

Question

我正在嘗試將 cursor 設置到輸入字段中。 我正在使用函數 focus() 和 select() 但我不知道為什么它不起作用。

有任何想法嗎？

 <input type="text" id="test"> <p onmousedown="press()">Test</p> <script> function press() { let input = document.getElementById('test'); input.focus(); input.select(); } </script>

Answer 1

這是一個有趣的問題，讓我對mousedown事件的默認行為以及它與click之間的區別進行了一些調查。 謝謝！

答案實際上可以在 MDN 文檔的“ 注釋”部分中明確找到mousedown ：

如果從 mousedown 事件處理程序調用 HTMLElement.focus()，則必須調用 event.preventDefault() 以防止焦點離開 HTMLElement

所以要修復，就這樣做。 請注意，為了做到這一點，我稍微重寫了您的代碼，使用addEventListener將 JS function 綁定到事件，然后將事件 object 作為參數。 （您可能認為使用全局event object 以您的方式完成了它 - 但使用它是一個壞主意。使用addEventListener而不是內聯 JS 來評估字符串屬性並將其作為 JS 執行也是一種更好、更現代的方法.)

 <input type="text" id="test"> <p id="button">Test</p> <script> button.addEventListener("mousedown", press); function press(event) { event.preventDefault(); let input = document.getElementById('test'); input.focus(); input.select(); } </script>

我認為這是必要的原因是mousedown事件必須有一個默認處理程序，該處理程序導致焦點在該特定元素上的 go - 這會覆蓋您以編程方式將焦點放在其他地方的嘗試。 我不是 100% 確定這一點，但這是我能想到的最有可能的解釋。

請注意，如果您使用的是click事件而不是mousedown ，那么您的原始代碼完全可以正常工作 - 這更常見。 不同之處在於，僅當用戶在初次按下后松開鼠標按鈕時才會觸發click ，而當按下時會立即觸發mousedown 。 我不明白為什么這種區別會很重要，除非出於某種原因它對您很重要，否則我建議使用click而不是上面的修復。