如何使元素在按下按钮时不会失去焦点

How to make element not lose focus when button is pressed?

本文关键字：失去 焦点 按钮 何使 元素      更新时间：2023-09-26

我有一个文本区域，在其中插入插入符号位置的内容（感谢Tim Down的回答）。它在用户按下按钮时插入内容。但似乎当按下按钮时，文本区域的焦点就消失了。如果插入符号的位置相同，我如何将焦点保持在那里？我一直在考虑将evt.preventDefault()与.focusout()结合使用。如果有帮助的话。

处理mousedown-事件，而不是单击事件。mousedown事件将在另一个元素的焦点丢失之前进行处理。

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

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

JS Fiddle演示

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

如果操作得当，可以通过编程将焦点重新放回元素上。如果做得不好，可能会破坏页面的可用性。

演示：JSFiddle

按下按钮时必须重新对焦。

HTML代码：

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

Javascript代码：

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

当按钮单击功能结束时，通过以编程方式将焦点应用回文本区域，可以轻松地做到这一点。通过这种方式，您可以在每次单击事件时重新获得焦点。

尝试使用tabindex=&quot-1〃；按一下按钮，也许可以。

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