javascript - 如何为 html 输入字段分派(dispatch) "invalid"事件

Question

The invalid event is fired when a submittable element has been checked and doesn't satisfy its constraints. The validity of submittable elements is checked before submitting their owner form, or after the checkValidity() of the element or its owner form is called.

是否可以在特定情况下创建和分派(dispatch)事件，以便触发 css 伪类“:invalid”和/或该元素的 checkValidity 函数返回“false”？

我正在考虑这样的代码片段:

const evt = new Event("invalid", {bubbles: true, cancelable: false, composed: true});
document.getElementById("inputField").dispatchEvent(evt);

Answer 1

是的，这实际上是可能的，基于我多年前在 Mozilla 写的一个叫做 CSS 选择器监听器的 hack:http://www.backalleycoder.com/2012/08/06/css-selector-listeners/ .总结一下黑客攻击，它基本上劫持了 CSS 动画，以便在匹配目标选择器时立即触发事件。

我创建了一个小演示，展示了如何创建一个合成 invalid 事件，该事件 1) 实际上冒泡，并且 2) 在输入值进入无效状态:https://codepen.io/csuwldcat/pen/GwBjbW

HTML:

<input minlength="3" maxlength="5" />

CSS:

input:invalid {
  color: red;
  animation: invalid 0.001s;
}

@keyframes invalid {
  0%: {
    outline-color: #000;
  }
}

JS:

document.addEventListener('animationstart', function(e){
  if (e.animationName == "invalid") console.log(e);
});