提交表单
用户单击提交按钮或图像按钮时,就会提交表单。使用<input>
或<button>
都可以定义提交按钮,只要将其type 特性的值设置为"submit"
即可,而图像按钮则是通过将的type 特性值设置为"image"
来定义的。因此,只要我们单击以下代码生成的按钮,就可以提交表单。
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});
这里使用了前面跨浏览器事件中封装的EventUtil 对象,以便跨浏览器处理事件。调用prevetnDefault()
方法阻止了表单提交。一般来说,在表单数据无效而不能发送给服务器时,可以使用这一技术。
表单重复提交
提交表单时可能出现的最大问题,就是重复提交表单。在第一次提交表单后,如果长时间没有反应,用户可能会变得不耐烦。这时候,他们也许会反复单击提交按钮。结果往往很麻烦(因为服务器要处理重复的请求),或者会造成错误(如果用户是下订单,那么可能会多订好几份)。解决这一问题的办法有两个:在第一次提交表单后就禁用提交按钮,或者利用onsubmit 事件处理程序取消后续的表单提交操作。
重置表单
在用户单击重置按钮时,表单会被重置。使用type 特性值为"reset"的或都
可以创建重置按钮,如下面的例子所示
通用重置按钮
<input type="reset" value="Reset Form">
自定义重置按钮
<button type="reset">Reset Form</button>
这两个按钮都可以用来重置表单。在重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空,就会恢复为空;而带有默认值的字段,也会恢复为默认值。
用户单击重置按钮重置表单时,会触发reset 事件。利用这个机会,我们可以在必要时取消重置操作。例如,下面展示了阻止重置表单的代码。
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});
与提交表单一样,也可以通过JavaScript 来重置表单,如下面的例子所示。
var form = document.getElementById("myForm");
//重置表单
form.reset();
与调用submit()方法不同,调用reset()方法会像单击重置按钮一样触发reset 事件。
在Web 表单设计中,重置表单通常意味着对已经填写的数据不满意。重置表单
经常会导致用户摸不着头脑,如果意外地触发了表单重置事件,那么用户甚至会很恼
火。事实上,重置表单的需求是很少见的。更常见的做法是提供一个取消按钮,让用 户能够回到前一个页面,而不是不分青红皂白地重置表单中的所有值。扫描二维码关注公众号,回复: 5794924 查看本文章
表单字段
可以像访问页面中的其他元素一样,使用原生DOM 方法访问表单元素。此外,每个表单都有elements
属性,该属性是表单中所有表单元素(字段)的集合。这个elements 集合是一个有序列表,其中包含着表单中的所有字段,例如<input>
、<textarea>
、<button>
和<fieldset>
。每个表单字段在elements
集合中的顺序,与它们出现在标记中的顺序相同,可以按照位置和name 特性来访问它们。下面来看一个例子。
var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
如果有多个表单控件都在使用一个name(如单选按钮),那么就会返回以该name 命名的一个NodeList。例如,以下面的HTML 代码片段为例。
<form method="post" id="myForm">
<ul>
<li><input type="radio" name="color" value="red">Red</li>
<li><input type="radio" name="color" value="green">Green</li>
<li><input type="radio" name="color" value="blue">Blue</li>
</ul>
</form>
var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true
以上代码显示,通过form.elements[0]访问到的第一个表单字段,与包含在form.elements
[“color”]中的第一个元素相同。
也可以通过访问表单的属性来访问元素,例如
form[0]
可以取得第一个表单字
段,而form["color"]
则可以取得第一个命名字段。这些属性与通过elements 集
合访问到的元素是相同的。但是,我们应该尽可能使用elements
,通过表单属性访 问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。
共有的表单字段属性
能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作表单。例如,很多用户可能会重复单击表单的提交按钮。在涉及信用卡消费时,这就是个问题:因为会导致费用翻番。为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。只要侦听submit 事件,并在该事件发生时禁用提交按钮即可。以下就是这样一个例子。
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});
注意,不能通过onclick 事件处理程序来实现这个功能,原因是不同浏览器之间存在“时差”:有的浏览器会在触发表单的submit 事件之前触发click 事件,而有的浏览器则相反。对于先触发click 事件的浏览器,意味着会在提交发生之前禁用按钮,结果永远都不会提交表单。因此,最好是通过submit事件来禁用提交按钮。不过,这种方式不适合表单中不包含提交按钮的情况;如前所述,只有在包含提交按钮的情况下,才有可能触发表单的submit事件。
所有表单字段都有type
属性。对于<input>
元素,这个值等于HTML 特性type 的值。对于其他元素,这个type 属性的值如下表所列。说 明 HTML示例 type属性的值
单选列表 <select>...</select> "select-one"
多选列表 <select multiple>...</select> "select-multiple"
自定义按钮 <button>...</button> "submit"
自定义非提交按钮 <button type="button">...</button> "button"
自定义重置按钮 <button type="reset">...</buton> "reset"
自定义提交按钮 <button type="submit">...</buton> "submit"
共有的表单字段方法
focus()和 blur()
EventUtil.addHandler(window, "load", function(event){
document.forms[0].elements[0].focus();
});
要注意的是,如果第一个表单字段是一个<input>
元素,且其type
特性的值为"hidden"
,那么以上代码会导致错误。另外,如果使用CSS 的display
和visibility
属性隐藏了该字段,同样也会导致错误。
HTML5 为表单字段新增了一个autofocus
属性。在支持这个属性的浏览器中,只要设置这个属性,不用JavaScript 就能自动把焦点移动到相应字段。例如:
<input type="text" autofocus>
共有的表单字段事件
blur
:当前字段失去焦点时触发。
change
:对于<input>和<textarea>
元素,在它们失去焦点且value
值改变时触发;
对于<select>
元素,在其选项改变时触发。
focus
:当前字段获得焦点时触发。
change
事件在不同表单控件中触发的次数会有所不同。对于<input>和<textarea>
元素,当它们从获得焦点到失去焦点且value
值改变时,才会触发change
事件。对于元素,只要用户选择了不同的选项,就会触发change
事件;换句话说,不失去焦点也会触发change
事件。
通常,可以使用focus 和blur
事件来以某种方式改变用户界面,要么是向用户给出视觉提示,要么是向界面中添加额外的功能(例如,为文本框显示一个下拉选项菜单)。change
事件则经常用于验证用户在字段中输入的数据。例如,假设有一个文本框,我们只允许用户输入数值。此时,可以利用focus
事件修改文本框的背景颜色,以便更清楚地表明这个字段获得了焦点。可以利用blur
事件恢复文本框的背景颜色,利用change
事件在用户输入了非数值字符
时再次修改背景颜色
。下面就给出了实现上述功能的代码。
var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.style.backgroundColor != "red"){
target.style.backgroundColor = "yellow";
}
});
EventUtil.addHandler(textbox, "blur", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});
EventUtil.addHandler(textbox, "change", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});
关于blur 和change 事件的关系,并没有严格的规定。在某些浏览器中,blur 事件会先于change
事件发生;而在其他浏览器中,则恰好相反。为此,不能假定这 两个事件总会以某种顺序依次触发,这一点要特别注意。
文本框脚本
<input type="text" size="25" maxlength="50" value="initial value">
相对而言,元素则始终会呈现为一个多行文本框。要指定文本框的大小,可以使用rows和cols
特性。其中,rows 特性指定的是文本框的字符行数
,而cols 特性指定的是文本框的字符列数
(类似于元素的size 特性)。与<input>
元素不同,<textarea>
的初始值必须要放在<textarea>和</textarea>
之间,如下面的例子所示。
<textarea rows="25" cols="5">initial value</textarea>
另一个与的区别在于,不能在HTML 中给指定最大字符数。
无论这两种文本框在标记中有什么区别,但它们都会将用户输入的内容保存在value 属性中。可以通过这个属性读取和设置文本框的值,如下面的例子所示:
var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "Some new value";
选择文本
上述两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本。在调用select()
方法时,大多数浏览器(Opera 除外
)都会将焦点设置到文本框
中。这个方法不接受参数
,可以在任何时候被调用
。下面来看一个例子。
var textbox = document.forms[0].elements["textbox1"];
textbox.select();
在文本框获得焦点时选择其所有文本,这是一种非常常见的做法,特别是在文本框包含默认值的时候。因为这样做可以让用户不必一个一个地删除文本。下面展示了实现这一操作的代码。
EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});