Почему окно предупреждения продолжает работать в следующем коде? - PullRequest
Новая
       99

Почему окно предупреждения продолжает работать в следующем коде?

2 голосов
/ 31 января 2020

У меня есть следующий HTML код: 

function presence_check(elem) {
  if ($(elem).val() === "") {
    alert("Please enter something");
    $(elem).focus();
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Don't leave this textbox blank" onblur="presence_check(this)">
<input type="text" placeholder="Secon input box">

Код должен предупреждать пользователя и повторно фокусироваться на элементе, если текстовое поле пустое, но вместо этого он непрерывно запускает событие onblur. Я видел некоторые ответы, в которых говорилось, что когда всплывающее окно с предупреждением появляется, оно убирает фокус на элементе, и, следовательно, запускает событие onblur. Однако я не понимаю, как это возможно, поскольку функция alert () вызывается после того, как элемент уже потерял фокус

1 Ответ

2 голосов
/ 31 января 2020

Проблема в том, что на blur отображается alert(). Затем вы помещаете фокус назад в элемент, готовый к тому, что blur снова срабатывает, когда пользователь нажимает кнопку в диалоговом окне, следовательно, бесконечное l oop. Вы можете увидеть, что это происходит в выводе консоли в this fiddle

. Это яркий пример того, почему вы никогда не должны использовать alert() в любой системе - даже для целей отладки. Используйте фактический элемент HTML для отображения предупреждения пользователю и console.log() или console.dir() для отладки. Вот пример того, как это сделать: 

$('input.validate').on('blur input', function() {
  var $message = $(this).next('.validation-message');
  if (this.value.trim() === "") {
    $message.show();
    this.focus();
  } else {
    $message.hide();
  }
});
.validation-message {
  display: none;
  color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" placeholder="Don't leave this textbox blank" class="validate" />
  <span class="validation-message">Please enter something</span>
</div>
<div>
  <input type="text" placeholder="Second input box" />
</div>

Я также настоятельно рекомендую вам не возвращать фокус в поле, когда оно недопустимо, так как это мешает пользователю делать что-либо еще на вашей странице, который ужасен UX.

Когда вы сделаете это, JS можно упростить до следующего: 

$('input.validate').on('blur input', function() {
  $(this).next('.validation-message').toggle(this.value.trim() === '');
});
...