模糊后无法聚焦回输入字段答案

【问题标题】：Can't focus back to input field after blur模糊后无法聚焦回输入字段
【发布时间】：2018-02-28 21:28:44
【问题描述】：

所以我查看了与我的问题相关的大多数链接，但似乎无法使其正常工作。

在此链接jquery focus back to the same input field on error not working on all browsers 上尝试了解决方法，但它对我不起作用。

我有一个 javascript，它在退出（模糊）时评估输入字段的值。效果很好。问题是当值错误时，我会显示警报，删除字段的内容并将焦点重新设置在错误的字段上。

问题来了。在 Firefox 中，焦点仍将转到我单击的另一个字段（触发上一个字段的 blur()）。在 IE(11.0.9600) 或 Chrome(64.0) 中，警报会显示，但会一直以某种无限循环返回。我必须杀死浏览器。

所以这是我的 HTML 的一个非常截断的版本：

<!DOCTYPE html>
<html class="OUTPUT WEB CHANNEL_WEB simplex" section="ChargesLinesList" dpi="96" scale="1.0">
<input id="dateBilled" class="myDateField" name="dateBilled" value="2018-01-18" type="text">
<input id="dateBilled" class="myDateField" name="dateBilled" type="text">
<input id="dateBilled" class="myDateField" name="dateBilled" type="text">

这是我验证值并显示警报的代码：

$(".myDateField").on("blur", function(event){
    var myDateFormat = /^(((((1[26]|2[048])00)|[12]\d([2468][048]|[13579][26]|0[48]))-((((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30)))|(02-(0[1-9]|[12]\d))))|((([12]\d([02468][1235679]|[13579][01345789]))|((1[1345789]|2[1235679])00))-((((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30)))|(02-(0[1-9]|1\d|2[0-8])))))$/;
    if(!myDateFormat.test($(this).val())){
      alert('Invalid date or format.  Make sure you the format his YYYY-MM-DD and the date is valid');
      $(this).val("");
      $(this).focus();
    }
})

【问题讨论】：

你能发布你的实际代码吗？您发布的代码将模糊侦听器应用于所有三个<input>s，我猜这就是导致浏览器挂起的原因。这个setTimeout(() => { this.focus(); }, 50); 对我有用。
这将导致一个永无止境的警报循环
您正在创建一个潜在的无限循环，因为每次焦点更改时，前一个字段都会收到 blur 事件，如果验证失败，您将尝试 focus它，导致另一个字段获取blur，但如果它无效，它将尝试focus，依此类推。
另请注意，仍然可以按 Tab 键来规避这一点（如下面的答案所示）。我认为这个糟糕的用户体验，宁愿在字段周围放置一个红色边框或其他东西并禁用提交按钮。让人们按照他们想要的顺序填写表格。
@ChrisG 按TAB 不会绕过change 事件。

标签： javascript input focus alert blur

【解决方案1】：

每当一个字段失去焦点时，blur 事件就会触发，但在您的情况下，当有人离开一个字段并点击另一个字段时，blur 将为第一个字段触发，如果该字段未通过您的验证，焦点将切换回它，导致用户单击的另一个字段失去焦点，然后blur 将为该字段触发，依此类推。

相反，您应该使用change 事件，该事件会在焦点丢失时触发，但仅当字段的值发生变化时焦点。这将避免无限循环，然后.focus() 将正常工作。

此外，您不能有多个元素具有相同的id，并且每个文本框也应该有一个唯一的名称。

最后，您的<html> 标记充满了对HTML 无效的属性。您在那里所做的大部分工作都应该通过媒体查询来完成。

$(".myDateField").on("change", function(event){
    var myDateFormat = /^(((((1[26]|2[048])00)|[12]\d([2468][048]|[13579][26]|0[48]))-((((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30)))|(02-(0[1-9]|[12]\d))))|((([12]\d([02468][1235679]|[13579][01345789]))|((1[1345789]|2[1235679])00))-((((0[13578]|1[02])-(0[1-9]|[12]\d|3[01]))|((0[469]|11)-(0[1-9]|[12]\d|30)))|(02-(0[1-9]|1\d|2[0-8])))))$/;
    if(!myDateFormat.test($(this).val())){
      alert('Invalid date or format.  Make sure you the format his YYYY-MM-DD and the date is valid');
      $(this).val("");
      $(this).focus();
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="dateBilled1" class="myDateField" name="dateBilled1" value="2018-01-18" type="text">
<input id="dateBilled2" class="myDateField" name="dateBilled2" type="text">
<input id="dateBilled3" class="myDateField" name="dateBilled3" type="text">

【讨论】：