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

Can't focus back to input field after blur

所以我查看了与我的问题最相关的 link,但似乎无法解决问题。

尝试了此 link 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();
    }
}) 

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

相反,您应该使用 change 事件,该事件在失去焦点时触发,但 仅当字段的值发生变化时[=35] =] 因为它获得了焦点。这将避免无限循环,然后 .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">