如何检测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的属性,我们可以对比文本域的当前值和默认值是否相同以决定文本域的修改是否发生。
<
input
type
=
"text"
id
=
"name"
name
=
"name"
value
=
"www.csser.com"
/>
|
var name = document.getElementById("name");
|
if (n.value != n.defaultValue) alert("#name has changed");
|
小提示
:HTML4
或XHTML中,文本域类型为text、hidden、password或file的对象有defaultValue属性。HTML5新的表单类型也有
defaultValue属性并且可以用相同的方式检测默认值是否改变过,这些新表单元素包含email、tel、url、range、date、
color和search。
checkbox和radio
checkbox和radio对象有一个defaultChecked属性,其取值为true或false,我们可以通过对比当前选中状态与默认选中状态进行比较,如:
<
input
type
=
"checkbox"
id
=
"optin"
name
=
"optin"
checked
=
"checked"
/>
|
var optin = document.getElementById("optin");
|
if (n.checked != n.defaultChecked) alert("#optin has changed by csser");
|
注意checkbox和radio对象也有defaultValue属性,但它仅被分配给元素的value特性(attribute)而不能标识当前的选中状态。
下拉列表select
select控件通常用于提供一个下拉列表供用户选择,相比上面提到的控件,select有一点复杂,select元素本身并不具有默认值属性,它
的默认值存在于其option元素集合内。当页面加载完毕,默认选中的option拥有selected特性,也就是这个option对象拥有
defaultSelected属性且值为true。
我们可以从select节点的selectedIndex属性取得当前选中的option的索引值,如果该option对象的defaultSelected属性为false,那么select控件的值一定被修改了,如:
<
select
id
=
"job"
name
=
"job"
>
|
<
option
>web designer</
option
>
|
<
option
selected
=
"selected"
>csser.com developer</
option
>
|
<
option
>graphic artist</
option
>
|
<
option
>IT professional</
option
>
|
<
option
>other</
option
>
|
var job = document.getElementById("job");
|
if (!job.options[job.selectedIndex].defaultSelected) alert("#job has changed");
|
上面的代码在单选下拉列表并且有一个option拥有selected特性时运行正常,但我们需要留意一些陷阱:
- 如果没有option被赋予selected特性,浏览器会将第一个设为默认选中,但其defaultSelected属性值却为false
- 如果两个或更多option拥有selected特性(这不合逻辑,但是可能的),每个option都会拥有defaultSelected属性且值为true,但是浏览器仅能得到最后一个的默认值。
- 多重选择控件允许用户选择任意个option:
<
select
id
=
"skills"
name
=
"skills"
multiple
=
"multiple"
>
|
<
option
selected
=
"selected"
>HTML</
option
>
|
<
option
selected
=
"selected"
>CSSer</
option
>
|
<
option
selected
=
"selected"
>JavaScript</
option
>
|
多选下拉列表并不常用,因为用多个checkbox可以提供更友好的界面,但是,如果使用多选下拉列表,多个option具有
defaultSelected属性且值为true,select节点的selectedIndex属性已经无效,所以需要循环每一个option才能判
断其selected属性是否与其defaultSelected属性相匹配。下面的代码可以解决这个问题:
var
skills = document.getElementById(
"skills"
),
|
c =
false
, def = 0, o, ol, opt;
|
for
(o = 0, ol = n.options.length; o < ol; o++) {
|
c = c || (opt.selected != opt.defaultSelected);
|
if
(opt.defaultSelected) def = o;
|
if
(c && !skills.multiple) c = (def != skills.selectedIndex);
|
if
(c) alert(
"#skills has changed"
);
|
上面这些就是本文介绍的如何检测一个表单值是否改变的内容。
原文:如何检测HTML表单已经发生改变
分享到:
相关推荐
FieldChange(jQuery 插件) 这个 jQuery 插件是一个小插件,用于对表单字段执行定期检查,并在该字段的表单状态发生变化时调用回调函数。 在原生 Javascript 事件过于频繁或未涵盖所有基础的情况下,此功能可能很...
@ dvalue input表单提示默认值 @ tip 默认提示信息样式名class @ tipnone 在指定的input执行click时替换的样式名class + 使用方法: $ "#xxx" autotip ; @ #xxx 为需要提示的input的id">本插件是为...
本章节我们将讨论如何在 React 中使用表单。 HTML 表单元素与 React 中的其他 DOM 元素有所不同,因为表单元素生来就保留一些内部状态。...在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听
一旦一个字段连接到给定的属性,它就会观察它并在属性的值发生变化时立即更新视图。 创建表单非常简单,您只需要定义表单模型(可以是您想使用表单设置的具有公共属性的任何对象)并实现DRFor
function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年) { var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value; if (MMvalue == ""){ var e = document.form1.DD; ...
React 表单与事件 本章节我们将讨论如何在 React 中使用表单。 HTML 表单元素与 React 中的其他 DOM 元素有所不同,...在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化,并修改
一个使用 React 和 Bootstrap 从 JSON Schema 生成 html 表单的简单库。 安装 安装reformation-js: npm install reformation-js 形式 Form 组件是reformation-js的主要接口。 Struts 类型 必需的 描述 schema ...
onchange 事件会在域的内容改变时发生。onclick 事件会在对象被点击时发生。onfocus 事件在对象获得焦点时发生。onkeydown 事件会在用户按下一个键盘按键时发生。onkeypress 事件会在键盘按键被按下并释放一个键时...
每当表单控件中的值发生变化时,Angular 就会进行验证,并生成一个验证错误的列表(对应着 INVALID 状态)或者 null(对应着 VALID 状态)。 2示例 这是我写的一个小demo,这种验证方式无需写js代码全部在标签 里使用...
7.4 层叠:当规则发生冲突时 129 7.5 属性的值 132 第8章 操作样式表 139 8.1 创建外部样式表 139 8.2 链接到外部样式表 140 8.3 创建嵌入样式表 142 8.4 应用内联样式 143 8.5 样式的层叠和...
注意:这个小部件仍在开发中,事情一直在发生巨大变化。 可能最新的文档类型是演示页面 (demo.html),因为这是我用于测试的内容。 此页面将在未来扩展 - 现在,请检查 master 分支中的演示页面以了解其工作原理。 ...
JavaScript HTML DOM 事件 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 实例 Mouse Over Me Click Me 对事件做出反应 我们可以在事件发生时执行 ...当提交 HTML 表单时 当用户触发按键时 在本例中,
网络检查器(alpha) 模块: 形式 该模块允许您在网页上使用 HTML 表单进行复杂的工作。 他们的检测,列出他们的...允许您查看特定网页上的具体值,如果它以某种方式发生变化,会通知您,以便您执行一些适当的操作。
第 1 部分: Ajax 简介 Ajax 由 HTML、JavaScript™ 技术...当需要在 JavaScript 代码和服务器之间传递 XML 和改变 HTML 表单的时候,我们再深入研究 DOM。没有它也能做一些有趣的工作,因此现在就把 DOM 放到一边吧
答案: Microsoft Visual FoxPro Web 站点已经链接到了多种联机支持选项,其中包括覆盖面广阔的有关所有产品 Microsoft Knowledge Base(Microsoft 知识库)。您还可以阅读一份有关常见问题的清单。除联机支持之外,...
前言:前端时间也是应项目的需求... IOS:IOS系统 的键盘处在窗口的最上层,当键盘弹起时,webview 的高度 height 并没有改变,只是 scrollTop 发生变化,页面可以滚动。且页面可以滚动的最大限度为弹出的键盘的高度
同时人们的生活方式也在随着发生改变, 传统的购物方式已不能满足人们的需求。使得企业的IT部门已经认识到Internet的优势 ,电子商务就是在这样一个背景下产生发展起来的。伴随着电子商务技术的不断成熟,电 子商务的...
同时人们的生活方式也在随着发生改变, 传统的购物方式已不能满足人们的需求。使得企业的IT部门已经认识到Internet的优势 ,电子商务就是在这样一个背景下产生发展起来的。伴随着电子商务技术的不断成熟,电 子商务的...
输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化 我们可以参照官方文档的例子 http://cn.vuejs.org/v2/guide/forms.html#文本 我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是...