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

Question

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

Answer 1

没有必要更新焦点！

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

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

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

JS-Fiddle 演示

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

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