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

Question

我很惊讶在谷歌上找不到任何与此相关的东西。

我现在的问题是，我希望我的表单字段根据其有效性突出显示，但只有在用户与表单交互后。我不希望无效字段在页面加载后立即变为红色。我试着在表单元素中使用：visited和：focus，但前者不起作用，后者不能满足我的要求。

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

编辑：我确实在搜索中遇到了onblur，但我认为只有CSS才能直观地做到这一点，结果我错了→CSS有一个：blur选择器(伪类(吗？

Answer 1

只需检查用户何时开始使用onkeydown事件进行键入

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

Answer 2

您的输入需要一个onchange事件侦听器。一旦输入失去焦点，javascript函数就会启动。我为您提供了一个代码片段作为示例。

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

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

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

.error {
border: 2px solid crimson;
}

<input type="text" placeholder="enter your username" onchange="validateInput(this)" />

Answer 3

有几种方法可以实现：

您可以使用Jquery:

$('#YourElementID').on('change keypress paste textInput input', function (){
console.log("Something has changed");
}

用Javascript实现这一点已经暗示了我一段时间：

document.getElementById("YourElementID").onkeydown = function () {
console.log("Something has changed");
}

要将其绑定到Javascript类中的函数，可以使用正常的Bind(this)语法：

#Start() {
this.htmlDOM.onkeydown = this.OnInput.bind(this);
}
OnInput() {
if (this.previousValue != this.jqueryObject.val()) {
console.log("Value has changed");
} else {
console.log("Value has not changed");
}
this.previousValue = this.jqueryObject.val();
}