怎么检测HTML表单已经发生改变-HTML教程-爱易网页

怎么检测HTML表单已经发生改变

日期：2014-05-17　浏览次数：20927 次

如何检测HTML表单已经发生改变

如何检测HTML表单已经发生改变

表单是Web应用不可缺少的功能，它是服务器端与浏览器端数据交换的最基本的方法。你应该已经读过很多关于HTML5和Javascript的表单标签和数据验证的文章，然而今天我们来讨论下如何检查表单数据是否被改变了。

为什么要检查表单数据被更新？

有很多理由需要检测表单数据是否有修改，让我们来看一个很常见的场景，如果用户修改了一个或多个表单域的值，当用户跳离当前页面时，你会给出用户类似“你的修改尚未保存”的提示。你甚至可以给出用户是否保存数据（比如Ajax）的选项。另外的情况，如果表单项没有被修改，这时略去冗余的表单验证和数据发送将会增强用户体验。

Javascript?onchange事件

为HTML表单元素添加onchange事件处理器是一种可行的方法，这也是用的最多的，但是onchange的实现有一些问题存在：

如果用户改变表单域的值，然后再修改回原始值，程序仍将认为表单的修改已经发生。
如果表单项的值是通过Javascript动态修改的，onchange事件不会被自动触发。
为每一个表单元素增加onchange事件会引起性能问题，特别是较大的表单。
如果将表单元素从DOM中增加或移除，你需要相应的注册或移除事件侦听。
checkbox和radio的onchange事件在某些浏览器下不能按预期工作（你应该知道是哪个浏览器）。
除了onchange，还有更简单有效的方案。

比较默认值

幸运的是，我们不需要为了复杂的事件处理而写过多的废话，每个表单元素都有与该对象相关联的默认值，即页面加载完后表单控件显示或者默认的数据值，该值可与用户操作后的值进行对比以得出表单域的值是否发生了改变。

有点不幸的是，不同类型的表单元素的默认值属性（properties）不尽相同（做些判断好了，并不影响什么）

文本域input和textarea

让我们从简单的元素开始，所有的textarea对象和除了checkbox、radio之外的?input对象都有一个名为defaultValue的属性，我们可以对比文本域的当前值和默认值是否相同以决定文本域的修改是否发生。

<!--?name?input?-->

<
input
?type
=
"text"
?id
=
"name"
?name
=
"name"
?value
=
"www.csser.com"
?/>

<
script
>

var?name?=?document.getElementById("name");

if?(n.value?!=?n.defaultValue)?alert("#name?has?changed");

</
script
>

小提示 ：HTML4 或XHTML中，文本域类型为text、hidden、password或file的对象有defaultValue属性。HTML5新的表单类型也有 defaultValue属性并且可以用相同的方式检测默认值是否改变过，这些新表单元素包含email、tel、url、range、date、 color和search。

checkbox和radio

checkbox和radio对象有一个defaultChecked属性，其取值为true或false，我们可以通过对比当前选中状态与默认选中状态进行比较，如：

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。