javascript - 有没有办法在表单实际更改时检查它？

Question

我意识到有一个onchange事件属性用于检测表单的变化并执行某个javascript函数。但是，这需要用户在表单域之外单击，使其非常类似于onblur.

实际上有没有一种方法可以在表单更改时执行功能，而无需等待用户在表单外单击？

我知道您可以使用 JavaScript 超时每隔几毫秒检查一次表单，但我更喜欢没有它们的解决方案。此外，我不仅限于表单元素；我可以使用contenteditable divs.

我认为不需要代码，但如果需要，我可以添加我的意思的示例代码。

Answer 1

jQuery 具有强大的功能，可以满足您的需求，但如果您只需要运行一个简单的脚本，您可以使用诸如 onkeydown 和 onkeypress 之类的功能。

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

资料来源：

W3 学校 - OnKeyPress

W3 学校 - OnKeyDown

Answer 2

如果我自己这样做，我会在表单的输入上监听 change 事件。我个人认为这对你来说使用 jQuery 会更容易。

$('form input, form select').change(function() {
    console.log('form has been changed');
});

Answer 3

如果您想确保在表单中任何类型的输入发生更改时捕捉到（即复选框、选择列表、单选按钮等，而不仅仅是文本），那么您可以使用我放在一起的以下代码段（假设您使用的是 jQuery）

$('form input[type=text]').keyup(formUpdated);

$('form input[type!=text], form select').change(formUpdated);

function formUpdated() {
    alert('input changed');
}

您可以在这里看到它的实际效果。

这只是消除对此需求的好方法：

<input type="text" onkeyup="formUpdated();">

<select onchange="formUpdated();">
</select>

<input type="radio" onchange="formUpdated();">

<input type="checkbox" onchange="formUpdated();">