如何防止元素失去焦点？

Question

如何保持焦点在一个文本框上？即使你在浏览器的任何地方单击。

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

- Bonesh

---

大量喝咖啡可能不是一个可接受的答案？你会强制用户按回车键提交表单吗？ - lucuma

不，他/她会触摸它的，因为我正在使用平板电脑。 - Bonesh

Answer 1

你需要订阅textbox的blur事件，并使用小超时时间恢复焦点。

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

这样，您就不需要依赖于页面上任何其他元素的事件订阅。如果您订阅了 body click 或 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>

- Konstantin Dinev

---

+1 这是目前唯一处理类似于失去焦点事件的答案。 - David Hedlund

模糊是在元素失去焦点时触发的事件。 - lucuma

@Curt，我解释了为什么不要处理点击事件。 - Konstantin Dinev

@LeonardChallis：如果您没有设置超时，$("#txtSearch").focus()将会立即（同步地）应用，然后blur事件将会冒泡到树上，文本区域将失去焦点。 - LeGEC

我总是这样解决 -> FIDDLE，并认为这更加“合适”??? - adeneo

Answer 2

Konstantin Dinev的回答在大多数情况下都可以正常工作，但如果您不想在单击html的某些部分时失去焦点，只需执行以下操作：

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

在我的情况下，我正在做一个小型的HTML文本编辑器，当按下操作按钮时，我不希望失去控制权，但在其他情况下则需要。 我只需要将nofocus类添加到按钮上，就不会获取控制权了。

- Hamboy75

---

谢谢！这是理想的答案。这个解决方案可以在第一时间防止失去焦点。如果您想操作文本区域的selectionStart，那么这就是您需要的。所有其他答案都描述了如何在失去焦点后立即返回焦点。 - noamyg

对我来说，这恰恰相反。它阻止了我集中注意力... - code

对我来说，我必须调用 e.preventDefault() 来防止失去焦点，return false 似乎没有任何作用。https://codepen.io/TechnoSam/pen/ZEyxxvy - TechnoSam

Answer 3

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

Live Demo: http://jsfiddle.net/QhaLY/

- Curtis

---

从技术上讲，如果你非常快，仍然可以在 #txtSearch2 中键入。 - h2ooooooo

@h2ooooooo：或者如果你按下'tab'键 - David Hedlund

@h2ooooooo 我同意David的观点。我的答案可以防止在其他地方点击，但无法防止切换标签页。Konstantin的答案是最佳解决方案。 - Curtis

Answer 4

如果你只需要点击特定元素时不抓取焦点，而且不使用jQuery和重新聚焦也是可能的。

只需监听mousedown事件并取消它即可。

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

- Lea Eichelsdörfer

---

有其他失去焦点的方法，比如切换选项卡，正如几个答案提到的那样。这可能对其他事情有用，但并不是针对原始问题的。 - orangecaterpillar

你说得对，我在找到解决方案后没有再次阅读原始问题。我已更新我的答案。 - Lea Eichelsdörfer

Answer 5

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

- user1032531

Answer 6

我使用 onMouseDown={e => e.preventDefault()}，它可以很好地工作。

- Stroga

Answer 7

除了点击输入框以外，还有其他失去焦点的方式，比如按Tab键。如果你想防止失去焦点，可以使用blur事件。

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

- Alan Bogu