模糊后无法聚焦回输入字段
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模糊后无法聚焦回输入字段相关的知识，希望对你有一定的参考价值。
所以我查看了我的问题上最相关的链接，似乎无法使其工作。
尝试了这个链接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]|1d|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事件，该事件在焦点丢失时触发，但仅当字段的值在获得焦点后发生更改时才会触发。这将避免无限循环，然后.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]|1d|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">以上是关于模糊后无法聚焦回输入字段的主要内容，如果未能解决你的问题，请参考以下文章