javascript - 按下按钮时如何使元素不失去焦点？

Question

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

Answer 1

没有必要重新关注！

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

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

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

JS-小提琴演示

Answer 2

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

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

演示：JSFiddle

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>

Answer 4

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