javascript - 将鼠标悬停在其他元素上时如何删除并重新设置输入焦点

Question

我使用 Bootstrap 3 并有一个标准输入字段，如下所示，我通过 jQuery 在页面加载上设置焦点:

我的输入: <input type="text" class="form-control" id="searchTerm" />

我的 jQuery: $('#searchTerm').focus();

在同一页面上，我有一个 Bootstrap 导航栏，并且希望在导航栏上导航时删除上述焦点 + 离开导航栏时重新设置焦点。这样做的原因是，否则闪烁的光标会与我的导航栏下拉菜单重叠，因此它在下拉背景中可见。

我的导航栏:

<nav class="navbar navbar-default" role="navigation">
    <div class="container">
        <div class="navbar-header margin-right-30">
          // ...

我想你可以使用类 "navbar" 上的焦点/模糊事件来做到这一点但我不确定是否以及如何实现这一点。我怎样才能正确地做到这一点？

Answer 1

您可能想使用 jQuery 的 .hover()和 .focus()方法(链接中的文档)。请注意，.hover() 方法采用回调参数，该参数是事件发生时将调用的函数。然而，.focus 方法虽然可以采用回调方法，但可以在不带参数的情况下调用，以将焦点简单地更改为点左侧的元素。

例如，您可能想要执行以下操作:

$('#navBar').hover(function(){
  this.focus();
});