HTML模式的行为不一致

Question

我试图让HTML模式发挥作用。我期望的行为是，只要不匹配给定模式的文本输入到输入中，输入的边缘将变为红色（错误状态），并在文本匹配后立即恢复正常再次模式。这是我使用的模式 - 对于非正则表达式的人来说，它允许字母表中的字符，包括大写和小写，并且只需要三个字符。

<input type="text" pattern="[A-Za-z]{3}">

我无法在我的项目中可靠地运行此行为，因此我从W3Schools https://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml5_input_pattern中获取此示例来测试它。

当我在Firefox（最新版本）中加载它时：

• 在页面渲染后第一次输入无效数据后，我需要点击其他地方（输入需要失去焦点），输入才会进入错误状态。
• 此后，如果我输入有效数据并单击其他位置，则输入状态将恢复正常。 （预期的行为）
• 但是，如果我在没有输入失去焦点的情况下输入无效数据，则仍然不会触发错误状态。

当我在Chrome中测试它时（再次使用最新版本），无论我输入什么或焦点在哪里，输入都不会变成红色。

这种模式不仅不符合我的预期，而且从浏览器到浏览器的行为也不一致。

任何人都能解释一下吗？这是官方特色吗？我知道它在移动浏览器上的表现并不一致，但它应该在主要的桌面浏览器上（Win7 FWIW中的平台）

Answer 1

HTML5验证在不同浏览器中的格式不同。虽然支持浏览器会阻止表单提交，但如果表单无效，那么除此之外的所有内容都是浏览器设计决策。

您可以尝试使用JavaScript强制执行某些行为。例如，如果您想要对无效输入进行某种即时反馈，则可以将处理程序附加到input事件。

＆＃13;

＆＃13;

document.querySelector('input').addEventListener('input', function(e) {
  if (!e.currentTarget.checkValidity()) {
    e.currentTarget.classList.add('invalid');
  } else {
    e.currentTarget.classList.remove('invalid');
  }
});

＆＃13;

.invalid {
  background-color: red;
}

＆＃13;

<form>
  <input type="text" pattern="[A-Za-z]{3}">
  <input type="submit">
</form>

＆＃13;

＆＃13;

＆＃13;

显然，你会想要更好的自定义样式，并且不会与本地＆＃34;无效状态发生冲突＆＃34;主流浏览器的样式，但这至少可以让你开始朝着正确的方向发展。

您还可以强制浏览器报告input事件的有效性。但是你可能会发现大多数浏览器＆＃39; reportValidity的行为有点太大，无法显示在每个无效input上。

＆＃13;

＆＃13;

document.querySelector('input').addEventListener('input', function(e) {
  e.currentTarget.reportValidity();
});

＆＃13;

<form>
  <input type="text" pattern="[A-Za-z]{3}">
  <input type="submit">
</form>

＆＃13;

＆＃13;

＆＃13;