Вызов метода focus приводит к бесконечному срабатыванию onblur - PullRequest
Новая
       70

Вызов метода focus приводит к бесконечному срабатыванию onblur

0 голосов
/ 27 апреля 2019

Я хочу проверить поле ввода, когда пользователь переходит к другому полю.У меня есть следующий код, который отлично работает. 

validate = (v) => {
  if (v.value=="yes") return;
  alert("Value must be exactly 'yes'. Please rectify.");
  //v.focus();
}
<p>Enter only 'yes' in this field:</p>
<input onblur='validate(this);' />

Однако, если я добавлю вызов метода focus с намерением выделить пользователя для исправления ошибки перед продолжением, метод onblur будетвыстрелил бесконечно.Почему это так?

Скрипка - https://jsfiddle.net/OldGeezer/8xfLwvn6/4/

При дальнейшем тестировании я обнаружил, что бесконечный onblur не произойдет, если он потеряет фокус, потому что я нажимаю на окно другого приложения.Это происходит, если я просто щелкаю другую часть веб-страницы (в Chrome).

Ответы [ 3 ]

1 голос
/ 27 апреля 2019

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

1 голос
/ 27 апреля 2019

По данным w3schools:

Примечание: Окно предупреждения убирает фокус с текущего окна и вынуждает браузер прочитать сообщение. Не злоупотребляйте этим методом, поскольку он не позволяет пользователю получить доступ к другим частям страницы, пока окно не будет закрыто.

Ссылка: https://www.w3schools.com/jsref/met_win_alert.asp

Оповещение отвлекает фокус от входа, создавая бесконечный цикл. Решение состоит в том, чтобы отобразить сообщение другим способом. Например, в элементе span: 

<p>Enter only 'yes' in this field:</p>
<input onblur="validate(this);" />  
<span id="message"></span>

<script>

validate = (v) => {
  if (v.value=="yes") return;
  document.getElementById("message").innerHTML = "Value must be exactly 'yes'. Please rectify.";
  v.focus();
}

</script>
0 голосов
/ 27 апреля 2019

То, что вы делаете, это постоянно запускаете функцию onblur, вы запускаете ее снова и снова, и на каждой итерации вы получаете предупреждение.

  1. Ввод получает событие onblur, показывает предупреждение, автоматически фокусируется на вводе.
  2. Вы щелкаете в любом месте, и onblur снова запускается, показывает предупреждение и снова фокусируется на вводе.

И вы делаете это, так сказать, в цикле.

Вместо того, чтобы фокусироваться на вводе, вы можете просто присвоить ему цвет рамки.Таким образом, ваш onblur будет срабатывать только один раз.

...