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

时间:2018-02-28 21:28:44

标签: javascript input focus alert blur

所以我查看了与我的问题最相关的链接,似乎无法使其发挥作用。

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

1 个答案:

答案 0 :(得分:0)

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

相反,您应该使用change事件,该事件在焦点丢失时触发,但 仅在字段值已更改 时触发它得到了关注。这将避免无限循环,.focus()将正常工作。

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

最后,您的<html>标记中包含对HTML无效的属性。你在那里做的大部分工作都应该通过媒体查询来完成。

&#13;
&#13;
$(".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();
    }
}); 
&#13;
<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">
&#13;
&#13;
&#13;