按下按钮时如何使元素不失去焦点？答案

【问题标题】：How to make element not lose focus when button is pressed?按下按钮时如何使元素不失去焦点？
【发布时间】：2023-04-04 00:15:01
【问题描述】：

我有一个文本区域，我在插入符号的位置插入内容（感谢Tim Down's answer）。它在用户按下按钮时插入内容。但似乎当按下按钮时，textarea 上的焦点就丢失了。如果插入符号的位置也相同，我如何将焦点保持在那里？我正在考虑将evt.preventDefault() 与.focusout() 一起使用。如果有帮助的话。

【问题讨论】：

标签： javascript jquery html focus selection

【解决方案1】：

无需重新关注！

确保您处理的是 mousedown 事件（而不是 click 事件）。 mousedown 事件将在另一个元素失去焦点之前触发。

在您的 mousedown 事件处理程序中，您需要防止事件默认行为。

e.preventDefault(); // on your mousedown event

JS-Fiddle demo

【讨论】：

这有防止触发的副作用：active
我更新了代码示例以显示 :active 选择器仍按预期工作。也许我错过了什么？请更详细地解释您的问题或提供代码示例。谢谢！
只要保持鼠标点击按钮。您将看到 button:active 样式没有被应用。 (火狐 76)
你是对的。在 Chrome 中，这很好 - 我已经更新了我的答案。
对我来说效果很好，谢谢！只是一个警告：这是一个 mousedown 事件，而不是单击事件！我没有仔细阅读它，花了一些时间让它工作。只是为了确保这不会发生在你身上:)

【解决方案2】：

您不能阻止焦点移动到可聚焦元素上，但仍允许鼠标单击具有其正常行为（例如click 按钮）。如果点击按钮等支持焦点的元素，将获得键盘焦点。

如果操作正确，可以以编程方式将焦点放回元素上。如果做得不好，可能会破坏页面的可用性。

演示：JSFiddle

【讨论】：

你能告诉我怎么做吗？抱歉我不知道。
@think123 - 我在答案末尾添加了一个工作演示。
好答案。尽管如此，我发现unselectable="on" 似乎也可以工作，至少对于按钮。
@jfriend00 @think123 如果您在 mousedown 中 .preventDefault() jsfiddle.net/Ddffh/103 ，您完全可以阻止焦点移动到可聚焦元素。单击时恰好为时已晚，因为鼠标按下后，焦点已经丢失。您可以在自己的演示中通过在释放之前按住鼠标按钮片刻来验证这一点：当您第一次按下鼠标时，焦点将丢失；释放后，点击事件触发。
@Han，如果你能添加你的评论作为答案会很好，这对我帮助很大，但似乎不是每个人都在阅读 cmets。

【解决方案3】：

按下按钮时，您必须重新获得焦点。

HTML 代码：

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

Javascript 代码：

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

【讨论】：

【解决方案4】：

您可以通过在按钮单击功能结束时以编程方式将焦点重新应用到文本区域来轻松完成此操作。这样每次点击事件都可以重新获得焦点。

【讨论】：