Jquery щелкните за пределами элемента, чтобы скрыть другой элемент

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

Использование 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 2

Вы ищете blur событие. Когда вы нажимаете на input, он получает focus, когда вы выходите (нажав, взаимодействие с клавиатурой и т. д.), он теряет фокус и вызывает blur, Так:

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

Также может быть хорошей идеей использовать focus событие вместо click в строке 1, чтобы пользователи могли также вкладываться в поле и работать правильно:

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

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

Смотрите также:

• https://api.jquery.com/focus/
• https://api.jquery.com/blur/

Answer 3

Скорее всего, то, что вы хотите, может быть достигнуто с 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 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>