将焦点设置到输入字段

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而不是上面的修复。