当按钮被按下时，如何使元素不失去焦点？

Question

我有一个文本域，我正在其中插入内容并将其插入插入符号的位置（感谢Tim Down的答案）。 当用户按下按钮时，它会插入内容。 但是，当按钮被按下时，文本域的焦点丢失了。 如何保持焦点在那里，同时提供插入符号的位置仍然相同？ 我考虑使用evt.preventDefault()和.focusout()。 如果这样有帮助。

- Lucas

Answer 1

处理 mousedown 事件而不是 click 事件。在失去另一个元素的焦点前，将处理 mousedown 事件。

在你的 mousedown 事件处理函数中，必须阻止事件默认行为。

e.preventDefault(); // in your mousedown eventhandler

JS-Fiddle演示

- Thomas Deutsch

---

这会产生副作用，防止触发 :active。 - laconbass

我已更新代码示例，以显示 :active 选择器仍按预期工作。 也许我漏掉了什么？请详细说明您的问题或提供代码示例。谢谢！ - Thomas Deutsch

只需将鼠标点击在按钮上，您会发现按钮的:active样式不会被应用。（Firefox 76） - laconbass

你是正确的。在Chrome中，它很好 - 我已经更新了我的答案。 - Thomas Deutsch

它对我来说很好用，谢谢！只是提醒一下：它是mousedown事件而不是click事件！我没有仔细阅读，花了我一些时间才使其正常工作。只为确保这不会发生在你身上 :) - Ricardo Magalhães

Answer 2

您无法阻止焦点移动到可聚焦元素，并仍允许鼠标点击具有其正常行为（如单击按钮）的操作。如果单击支持焦点的元素，例如按钮，则它将获得键盘焦点。

如果正确执行，可以通过编程方式将焦点放回元素。如果执行不当，则可能破坏页面的可用性。

演示：JSFiddle

- jfriend00

---

@think123 - 我在我的答案末尾添加了一个可工作的演示。 - jfriend00

在演示中，我们可以在“随便做什么”这里添加一些选择内容吗？ - MadeInDreams

如果你在鼠标按下事件中使用.preventDefault()，完全可以阻止焦点移动到可聚焦元素上：http://jsfiddle.net/Ddffh/103/ 。因为在点击之前已经太晚了，此时焦点已经丢失。你可以通过在自己的演示中按住鼠标一段时间再释放来验证这一点：当你第一次按下鼠标时，焦点会丢失；释放后，点击事件才会触发。 - Han Seoul-Oh

@Han - 我认为这里的问题是如何允许控件保持其正常行为并防止它获取焦点（在 OP 提到的特定情况中，他们想要按下一个按钮）。我认为您的建议将阻止鼠标单击的正常行为，这不是 OP 想要的。 - jfriend00

@Han，如果您能将您的评论添加为答案，那就太好了。它对我非常有帮助，但似乎并不是每个人都会阅读评论。 - Andrey Rudenko

Answer 3

当按钮被按下时，您需要重新聚焦。

HTML代码：

<input id="messageBox" autofocus />
<input type="button" id="messageSend" onclick="setFocusToMessageBox()" value="Send" />

Javascript代码：

<script>
function setFocusToMessageBox(){
    document.getElementById("messageBox").focus();
}
</script>

- Tmthetom

---

这意味着键盘关闭然后重新打开需要大约半秒钟的时间。我想要像WhatsApp之类的东西，当点击发送时，键盘甚至不会闪烁。 - UNK30WN

Answer 4

尝试在按钮上使用tabindex="-1"，也许会起作用。

<input type="text" name="body" id="body" Placeholder="message..">
<input type="submit" value="send" id="sendButton" tabindex="-1">

- UNK30WN

Answer 5

你可以通过在按钮点击函数结束后，以编程的方式将焦点重新应用到文本区域来轻松实现这一点。这样，每次点击事件发生时，你都可以恢复焦点。

- Shiv Kumar Ganesh