即使单击确定后，javascript警报也会持续触发

Question

我有一个textbox ，我希望用户添加整数，并且位数不应小于10 。

这里的问题是即使单击确定后alert消息也会持续激活。 请说明代码有什么问题。 还建议是否有任何其他好方法来实现这一点

 function checkLength(el) { if (el.value.length != 10 || el.getAttribute('data-should-alert') === 'false') { alert("Minimum 10 numbers are accepted"); el.setAttribute('data-should-alert', 'false'); el.focus(); } else { el.setAttribute('data-should-alert', 'true'); } } function IsNumeric4(e) { var keyCode = e.which ? e.which : e.keyCode var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1); document.getElementById("error4").style.display = ret ? "none" : "inline"; return ret; } 

 <div class="form-group"> <label for="">Stores / Sites Asst. Manager Mob</label> <input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onblur="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" /> <span id="error4" style="color: Red; display: none">* Only numbers allowed (0 - 9)</span> </div> 

Answer 1

问题是当元素失去焦点时，事件onblur总是被触发

所以一个解决方案是将该事件更改为onchange事件而不是onblur

 function checkLength(el) { if (el.value.length != 10 || el.getAttribute('data-should-alert') === 'false') { alert("Minimum 10 numbers are accepted"); el.setAttribute('data-should-alert', 'false'); el.focus(); } else { el.setAttribute('data-should-alert', 'true'); } } function IsNumeric4(e) { var keyCode = e.which ? e.which : e.keyCode var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1); document.getElementById("error4").style.display = ret ? "none" : "inline"; return ret; } 

 <div class="form-group"> <label for="">Stores / Sites Asst. Manager Mob</label> <input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onchange="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" /> <span id="error4" style="color: Red; display: none">* Only numbers allowed (0 - 9)</span> </div> 

Answer 2

我认为问题是你在显示警报后正在关注

Answer 3

因为警报会再次触发模糊。

setTimeout为您提供了一种在alert后进行.focus()调用的棘手方法：

 function checkLength(el) { // this may cause once alert, it will always alert if (el.value.length != 10/* || el.getAttribute('data-should-alert') === 'false'*/) { alert("Minimum 10 numbers are accepted"); el.setAttribute('data-should-alert', 'false'); // set this setTimeout(function(){ el.focus(); }, 10); } else { el.setAttribute('data-should-alert', 'true'); } } function IsNumeric4(e) { var keyCode = e.which ? e.which : e.keyCode var ret = ((keyCode >= 48 && keyCode <= 57) || specialKeys.indexOf(keyCode) != -1); document.getElementById("error4").style.display = ret ? "none" : "inline"; return ret; } 

 <div class="form-group"> <label for="">Stores / Sites Asst. Manager Mob</label> <input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onblur="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" /> <span id="error4" style="color: Red; display: none">* Only numbers allowed (0 - 9)</span> </div>