почему если input не в фокусе, кнопка не пропадает?

Question

Если input в фокусе, то кнопка должна появиться. Если фокус с input пропал, то кнопка должна пропасть. Не могу понять, почему не работает

$input = $('.search__input');
$submit = $('.search__button');
$submit_active = 'search__button_active';

$input.on('click', function() {
  if ($input.is(':focus')) {
    $submit.addClass($submit_active);
  } else {
    $submit.removeClass($submit_active);
  }
});

.search__button {
  display: none;
}

.search__button_active {
    display: inline-block;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
  <input type="text" class="search__input">
  <button class="search__button" type="submit">Найти</button>
</div>

Answer 1

А зачем вам JQuery?

Тут чистый css

.search__input + .search__button {
    display: none;
}
  
.search__input:focus + .search__button {
    display: inline-block;
}

<div class="search">
  <input type="text" class="search__input">
  <button class="search__button" type="submit">Найти</button>
</div>

Answer 2

Ну раз вам нужен jquery - используйте то, что jquery вам дает нахаляву -

https://api.jquery.com/focusin/

https://api.jquery.com/focusout/

и используйте специализированные функции

$input = $('.search__input');
$submit = $('.search__button');
$submit_active = 'search__button_active';

$input.focusin(function() {
    $submit.addClass($submit_active);
});

$input.focusout(function() {
    $submit.removeClass($submit_active);
});

.search__button {
  display: none;
}

.search__button_active {
    display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
  <input type="text" class="search__input">
  <button class="search__button" type="submit">Найти</button>
</div>

Answer 3

Можно использовать события focus/blur

$input = $('.search__input');
$submit = $('.search__button');
$submit_active = 'search__button_active';

$input.on('focus blur', function() {
  $submit.toggleClass($submit_active);
});

.search__button {
  display: none;
}

.search__button_active {
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search">
  <input type="text" class="search__input">
  <button class="search__button" type="submit">Найти</button>
</div>

БЛОГ НА HUSL

почему если input не в фокусе, кнопка не пропадает?

Ответы (3 шт):