Question

检查提交的元素时会触发无效事件并且不满足其约束。提交的有效性在提交所有者表单之前或之后检查元素调用元素或其所有者表单的checkValidity（）。

是否可以在某些情况下创建和调度事件，以便触发css伪类“：invalid”和/或该元素的checkValidity函数返回“false”？

我正在考虑这样的代码段：

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

Answer 1

是的，基于我很多年前在Mozilla上写的名为CSS Selector Listeners 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);
});

如何为html输入字段分派“无效”事件

1 个答案: