在Web开发中，表单是常见的用户输入方式。当用户编辑表单后，我们需要知道是否有改变，以便保存或提示用户保存。本文将介绍如何使用JavaScript检测HTML表单是否被编辑。
监听表单元素
我们可以通过监听表单元素的change事件来检测表单是否被编辑。这个事件会在元素的值改变时触发，包括输入框、下拉列表和复选框等表单控件。
const form = document.querySelector('form');
let isEdited = false;
form.addEventListener('change', () => {
isEdited = true;
});代码中，我们首先获取表单元素并定义一个isEdited变量表示表单是否被编辑。然后，我们通过addEventListener()方法添加change事件，当表单元素的值发生改变时，isEdited将被设置为true。
监听键盘事件
除了表单元素的change事件外，我们还可以通过监听键盘事件来检测表单是否被编辑。具体地说，我们可以监听keydown、keyup和paste事件。
-- -------------------- ---- ------- ------------------------------------ -- -- - -------- - ----- --- ---------------------------------- -- -- - -------- - ----- --- ---------------------------------- -- -- - -------- - ----- ---
代码中，我们通过document.addEventListener()方法添加键盘事件监听器，当用户按下键盘、松开键盘或粘贴文本时，isEdited将被设置为true。
重置表单状态
在某些情况下，我们可能需要重置表单的编辑状态。比如用户提交表单后，我们需要将表单状态重新设置为未编辑状态。我们可以使用以下代码来实现：
form.reset(); isEdited = false;
代码中，我们调用表单的reset()方法将表单元素的值重置为默认值，并将isEdited设置为false表示表单未被编辑。
示例代码
下面是一个完整的示例代码，演示如何检测HTML表单是否被编辑：
-- -------------------- ---- -------
------
------ ----------- ------------
------- --------------
------- --------------------------
------- ------------------------------
---------
------ --------------- ------------ ------------
------ ------------- ----- -- --- ----- --- ------------------
-------
--------
----- ---- - -------------------------------
--- -------- - ------
-- ---------------
------------------------------- -- -- -
-------- - -----
---
-- ------
------------------------------------ -- -- -
-------- - -----
---
---------------------------------- -- -- -
-------- - -----
---
---------------------------------- -- -- -
-------- - -----
---
-- ------
-------- ----------- -
-------------
-------- - ------
-
-- ----
-------- ------------ -
-- ---------- -
---------- ---- --- ---- ------- -- --- ---- -- ---- ------
- ---- -
---------- ---- --- --- ---- ----------
-
-
---------在上面的示例中，我们定义了一个包含文本框、下拉列表和复选框等表单元素的HTML表单。然后，我们使用JavaScript来监听表单元素和键盘事件，并根据表单的编辑状态进行相应的操作。
总结
通过本文的介绍，我们学习了如何使用JavaScript检测HTML表单是否被编辑。具体来说，我们可以监听表单元素的change事件和键盘事件来实现这个功能。此外，我们还介绍了重置表单状态的方法。掌握这些知识将有助于我们更好地处理表单数据并
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13642