Jquery 在元素外部单击以隐藏其他元素

Question

哈哈。我有个问题。当我在 <input type="search"> 之外单击时如何隐藏此按钮。当我单击 <input type="search"> 时 button 会显示，但我不知道如何在 <input type="search"> 外部单击时隐藏按钮。有什么想法吗？

HTML

<input type="search">
<button type="submit" class="search_btn" name="button">Search</button>

Jquery

 $("input[type='search']").click(function() {
   $(".search_btn").addClass("search_on");
 });
 $("*:not('input[type='search']')").click(function() {
   $(".search_btn").removeClass("search_on");
 });

Answer 1

很可能您想要的可以通过 focus 和 blur 事件来实现。

$("input[type='search']").focus(function() {
  $(".search_btn").addClass("search_on");
});
$("input[type='search']").blur(function() {
  setTimeout(function () {
    $(".search_btn").removeClass("search_on");
  }, 50);
});

您需要超时才能让按钮仍然被点击，因为点击按钮会导致输入模糊。

Answer 2

使用removeClass

$(document).on('click', function(event) {
  if (event.target.id !== 'submitButton' && event.target.id !== "search") {
    $(".search_btn").removeClass("search_on");
  }

})
$("input[type='search']").on({
  click: function() {
    $(".search_btn").addClass("search_on");
  }
});
$("#submitButton").click(function() {
  console.log($("#search").val())
})

.search_btn {
  display: none
}

.search_on {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" id="search">
<button type="submit" id="submitButton" class="search_btn" name="button">Search</button>

Answer 3

您正在查找 blur 活动。当你点击 input 时，它接收到 focus，当你离开时（通过点击、键盘交互等）它失去焦点并触发 blur。所以：

$("input[type='search']").blur(function () {
    $(".search_btn").removeClass("search_on");
})

在第 1 行使用 focus 事件而不是 click 可能也是一个好主意，这样用户也可以进入该字段并使其正常工作：

$("input[type='search']").focus(function() {
  $(".search_btn").addClass("search_on");
})

$("input[type='search']").blur(function () {
  $(".search_btn").removeClass("search_on");
});

另请参阅：

Answer 4

使用事件焦点和模糊：

$("input[type='search']").focus(function() {
  $(".search_btn").addClass("search_on");
})

$("input[type='search']").blur(function () {
  $(".search_btn").removeClass("search_on");
});

Answer 5

您可以使用 focus 和 blur 事件。当控件位于文本框内时，将调用 focus 事件。当控件离开文本框时，将调用 blur 事件。

$(document).ready(function() {
  $("input[type='search']").focus(function() {
    $("button[type='submit'].search_btn").addClass("search_on");
  })

  $("input[type='search']").blur(function () {
    $("button[type='submit'].search_btn").removeClass("search_on");
  });
});

.search_on { background-color: yellow; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search">
<button type="submit" class="search_btn" name="button">Search</button>

Jquery 在元素外部单击以隐藏其他元素

Jquery click outside the element to hide other element

javascript

jquery

jquery-plugins

jquery-click-event