Question

我想在用户移动到另一个字段时验证输入框。我有下面的代码工作正常。

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中），就会发生这种情况。

Answer 1

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

Answer 2

您正在做的是不断运行onblur函数，您一次又一次地运行它，并且每次迭代都会给您警报。

输入获取onblur事件，显示警报，自动关注输入。
您单击任意位置，然后onblur再次触发，显示警报，然后再次专注于输入。

可以这么说。

您可以仅给其边框颜色而不是专注于输入。这样，您的onblur只会触发一次。

Answer 3

使用alert()会将焦点从活动元素中移出，这将触发blur。因此，根据您的脚本，blur连续触发。使用console.log()可以帮助您更好地了解这一点。

调用聚焦方法会使onblur不断发射

3 个答案: