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

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

你应该已经读过很多关于HTML5和Javascript的表单标签和数据验证的文章，今天我们来讨论下如何检查表单数据是否被改变了。为什么要检查表单数据被改变？有很多理由需要检测表单数据是否有修改，让我们来看一个很常见的场景，如果用户修改了一个或多个表单域的值，当用户跳离当前页面时，你会给出用户类似“你的修改尚未保存”的提示。你甚至可以给出用户是否保存数据（比如Ajax）的选项。另外的情况，如果表单项没有被修改，这时略去冗余的表单验证和数据发送将会增强用户体验。Javascript02onchange事件为HTML表单元素添加onchange事件处理器是一种可行的方法，这也是用的最多的，但是onchange的实现有一些问题存在：如果用户改变表单域的值，然后再修改回原始值，程序仍将认为表单的修改已经发生。如果表单项的值是通过Javascript动态修改的，onchange事件不会被自动触发。为每一个表单元素增加onchange事件会引起性能问题，特别是较大的表单。如果将表单元素从DOM中增加或移除，你需要相应的注册或移除事件侦听。checkbox和radio的onchange事件在某些浏览器下不能按预期工作（你应该知道是哪个浏览器）。除了onchange，还有更简单有效的方案。比较默认值幸运的是，我们不需要...你应该已经读过很多关于HTML5和Javascript的表单标签和数据验证的文章，今天我们来讨论下如何检查表单数据是否被改变了。为什么要检查表单数据被改变？有很多理由需要检测表单数据是否有修改，让我们来看一个很常见的场景，如果用户修改了一个或多个表单域的值，当用户跳离当前页面时，你会给出用户类似“你的修改尚未保存”的提示。你甚至可以给出用户是否保存数据（比如Ajax）的选项。另外的情况，如果表单项没有被修改，这时略去冗余的表单验证和数据发送将会增强用户体验。Javascript02onchange事件为HTML表单元素添加onchange事件处理器是一种可行的方法，这也是用的最多的，但是onchange的实现有一些问题存在：如果用户改变表单域的值，然后再修改回原始值，程序仍将认为表单的修改已经发生。如果表单项的值是通过Javascript动态修改的，onchange事件不会被自动触发。为每一个表单元素增加onchange事件会引起性能问题，特别是较大的表单。如果将表单元素从DOM中增加或移除，你需要相应的注册或移除事件侦听。checkbox和radio的onchange事件在某些浏览器下不能按预期工作（你应该知道是哪个浏览器）。除了onchange，还有更简单有效的方案。比较默认值幸运的是，我们不需要为了复杂的事件处理而写过多的废话，每个表单元素都有与该对象相关联的默认值，即页面加载完后表单控件显示或者默认的数据值，该值可与用户操作后的值进行对比以得出表单域的值是否发生了改变。我们可以从select节点的selectedIndex属性取得当前选中的option的索引值，如果该option对象的defaultSelected属性为false，那么select控件的值一定被修改了，如： web02designer csser.com02developer graphic02artist IT02professional other var02job02=02document.getElementById("job"); if02(!job.options[job.selectedIndex].defaultSelected)02alert("#job02has02changed"); 上面的代码在单选下拉列表并且有一个option拥有selected特性时运行正常，但我们需要留意一些陷阱：如果没有option被赋予selected特性，浏览器会将第一个设为默认选中，但其defaultSelected属性值却为false如果两个或更多option拥有selected特性（这不合逻辑，但是可能的），每个option都会拥有defaultSelected属性且值为true，但是浏览器仅能得到最后一个的默认值。

有的,ontextchanged是text对象改变时触发的事件,其他类似还有很多的,可以查查javascript的参考手册或msdn