javascript - 如何防止元素失去焦点？

Question

如何将焦点保持在一个文本框上？即使您单击浏览器中的任意位置。

$("#txtSearch").focus();

Answer 1

您需要订阅blur事件textbox并以小超时恢复焦点：

$('#txtSearch').blur(function (event) {
    setTimeout(function () { $("#txtSearch").focus(); }, 20);
});

这样您就不必依赖订阅页面上任何其他元素的事件。如果您订阅body clickor html click，如果任何其他元素阻止其事件传播，它将不会运行click，并且在退出textbox.

例子：

<!-- I will not propagate my click to top level DOM elements -->
<button id="button">Click me</button>

<script>
$('#button').click(function (event) {
    event.stopPropagation();
});
</script>

Answer 2

Konstantin Diev 的回答在大多数情况下都可以，但是如果您不想仅在单击 html 的某些部分时失去焦点，请执行以下操作：

$(".nofocus").on( "mousedown", function (e) {
    return false;
});

在我的情况下，我正在做一个小型 html 文本编辑器，我不想在按下操作按钮时失去控制，但在任何其他情况下都可以。

我只需要将 nofocus 类添加到按钮，它不会控制

Answer 3

$("html").click(function(){
   $("#txtSearch").focus();
});

现场演示：http: //jsfiddle.net/QhaLY/

Answer 4

$('body').click(function(){$("#txtSearch").focus();});

Answer 5

如果您只需要单击特定元素即可不抓住焦点，也可以不使用 jQuery 且无需重新聚焦

只需监听 mousedown 事件并取消它

element.addEventListener("mousedown", event => {event.preventDefault(); event.stopPropagation()});

Answer 6

除了单击远离输入的区域（即选项卡）之外，还有其他失去焦点的方法。如果您想防止失去焦点，请使用模糊事件，即

document.getElementById('txtSearch').addEventListener('blur', e => {
  e.target.focus();
});