Question

Haai。我有个问题。当我点击<input type="search">之外时，如何隐藏此按钮。点击button时会显示<input type="search">，但在<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

您正在寻找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 2

您最有可能通过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 3

使用removeClass

＆＃13;

$(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())
})

＆＃13;

.search_btn {
  display: none
}

.search_on {
  display: inline-block;
}

＆＃13;

<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>

＆＃13;

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事件。

＆＃13;

$(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");
  });
});

＆＃13;

.search_on { background-color: yellow; }

＆＃13;

<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>

＆＃13;

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

5 个答案: