键入时将HTML验证消息静音-Java 学习之路

重现问题的步骤：

设置电子邮件/电话类型的输入
根据需要设置输入
点击表单提交错误的电子邮件模式
现在应该可以看到HTML验证消息 .
继续在输入框中输入文字

在启动验证消息后输入框中的文本时，验证消息将持续存在并在每次击键时显示 .

我甚至尝试在keyup事件上设置 setCustomValidity("") ，但这也无济于事 .

这是example fiddle .

这是一个问题的GIF：你可以看到，直到我将 @gmail.com 添加到电子邮件输入，它仍然显示HTML验证 .

enter image description here

任何帮助，将不胜感激 .

源代码相同 . HTML

<form>

  <p>
    <label for="t2">What's your e-mail?</label>
    <input id="email" type="email" id="t2" name="email" required>
  </p>
  <p>
    <button>Submit</button>
  </p>
</form>

$("#email").on("keyup", function (e) {
    if (e.target.value.lenth !== 0) {
    e.target.setCustomValidity("");
  }
});

1 回答

0
当用户按 enter 并且输入验证失败时，该输入将触发 invalid 事件 . 因此，您可以添加 invalid 处理程序来自定义（并可能阻止）生成的行为 . invalid 事件不会被普通字符的进一步输入触发，但只要输入保持无效和聚焦，无效弹出窗口就会一直显示 . 当输入未聚焦（模糊）时，验证弹出窗口将消失 . 只有在用户重新聚焦 input 并在输入文本仍然无效时按 enter 时，它才会重新出现 .

因此，一种可能的解决方案是添加一个 invalid 侦听器，用于跟踪错误弹出窗口是否显示 . 然后，添加一个 keydown 侦听器，检查弹出窗口是否显示 . 如果弹出窗口显示， blur 然后 focus 元素，以便弹出窗口消失，直到用户下次按 enter 为止：
```
let errorShowing = false;
$("#email")
.on('invalid', (e) => {
  errorShowing = true;
})
.on("keydown", function(e) {
  if (!errorShowing) return;
  setTimeout(() => {
    this.blur();
    this.focus();
  });
  errorShowing = false;
})
```
```
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <label for="t2">What's your e-mail?</label>
  <input id="email" type="email" id="t2" name="email" required>
</form>
```
回复于 2024-04-25T14:18:40+08:00

键入时将HTML验证消息静音

1 回答

相关问题