如何检测用户是否与表单进行了交互？答案

【问题标题】：How do I detect whether a user has interacted with a form?如何检测用户是否与表单进行了交互？
【发布时间】：2021-05-26 02:26:09
【问题描述】：

我很惊讶在 Google 上找不到与此相关的任何内容。

我现在遇到的问题是我希望我的表单字段根据其有效性突出显示，但仅在用户与表单交互之后。我不希望页面加载后无效字段变为红色。我尝试将 :visited 和 :focus-within 与我的表单元素一起使用，但前者不起作用，而后者不能满足我的要求。

我问这个问题的方式不对吗？

编辑：我确实在搜索中遇到了onblur，但我认为只使用 CSS 会有一种直观的方法，结果我错了 → Does CSS have a :blur selector (pseudo-class)?

【问题讨论】：

标签： html css

【解决方案1】：

使用 onkeydown 事件检查用户何时开始输入


<input type="text" onkeydown="myFunction()">

【讨论】：

【解决方案2】：

您的输入需要一个onchange 事件监听器。一旦输入失去焦点，javascript函数就会触发。我给你提供了一个代码sn-p作为例子。

您还可以查找其他输入，例如 onblur 或 onkeypress，但 onchange 更通用，因为它也适用于选择标签。

如果您想了解更多关于 DOM 事件的信息，可以查看w3schools documentation。

const validateInput = (e) => {
  if (e.value.length < 9) {
    e.classList.toggle("error")
  }
}

.error {
  border: 2px solid crimson;
}

&lt;input type="text" placeholder="enter your username" onchange="validateInput(this)" /&gt;

【讨论】：