调用焦点方法会导致onblur无休止地触发

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

使用alert()从活动元素中移除焦点，导致blur触发。因此，根据你的脚本，blur不断触发。使用console.log()可以帮助您更好地了解这一点。

Answer 3

你正在做的是不断运行onblur函数，你一次又一次地运行它，并在每次迭代时它给你提醒。

1. 输入获取onblur事件，显示警报，自动关注输入。
2. 您单击任意位置并再次触发onb​​lur，显示警报，并再次关注输入。

你可以在循环中这样做。

而不是专注于输入，你可以给它边框颜色。这样你的onblur只会发射一次。