设置input文本框最小长度时重复弹出提示的原因排查

嘿，我来帮你拆解这个重复弹提示的问题～

这个问题的根源其实是浏览器的焦点处理机制：

当输入框触发onblur事件弹出alert时，浏览器会把焦点转移到弹窗上，此时输入框已经失去焦点。当你点击OK关闭弹窗后，浏览器会自动把焦点重新放回原来的输入框。这时候如果输入框的内容还是不符合长度要求，一旦你再次点击页面其他区域（甚至某些浏览器下不需要额外点击，焦点变化会再次触发onblur），验证逻辑就会再次执行，导致提示框重复弹出。

另外，你的验证条件el.value.length != 10可以更精准一点——因为输入框设置了maxlength="10"，用户最多只能输入10个字符，所以改成el.value.length < 10逻辑会更清晰，毕竟我们只需要检查是否输入不足10位。

这里有两种实用的解决方式，你可以根据需求选择：

方案1：弹窗后让输入框保持焦点，引导用户修改 #

在弹出提示后，让输入框重新获得焦点，这样用户关闭弹窗后可以直接修改内容，不会因为再次点击其他区域触发重复验证：

function checkLength(el) {
  if (el.value.length < 10) {
    alert("Minimum 10 numbers are accepted");
    el.focus(); // 让输入框重新聚焦，方便用户修改
  }
}

方案2：用非阻塞的文本提示替代alert（更推荐） #

alert是阻塞式弹窗，很容易引发焦点相关的问题，更友好的方式是在输入框附近显示文本提示，完全规避焦点问题：

先修改HTML，添加一个提示容器：

<input type="text" class="form-control" id="txtStoreSiteAsstMangrMob" maxlength="10" onblur="checkLength(this)" onkeypress="return IsNumeric4(event);" ondrop="return false;" onpaste="return false;" />
<div id="mobileErrorTip" style="color: red; margin-top: 4px; display: none;">Minimum 10 numbers are accepted</div>

再更新JavaScript逻辑：

function checkLength(el) {
  const errorTip = document.getElementById('mobileErrorTip');
  if (el.value.length < 10) {
    errorTip.style.display = 'block'; // 显示错误提示
  } else {
    errorTip.style.display = 'none'; // 符合要求则隐藏提示
  }
}

这种方式不会干扰用户操作，体验更好，也彻底解决了重复弹窗的问题。

内容的提问来源于stack exchange，提问作者Nadeem