代码之家 › 专栏 › 技术社区 › Jean-Cédric Hamel

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

blur alert focus input javascript

Jean-Cédric Hamel · 技术社区 · 7 年前

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

已尝试此链接的解决方法 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 回复 | 直到 7 年前

Scott Marcus 7 年前

这个 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">