JavaScript学习笔记(十三)---- 表单事件
1.表单字段
可以像访问页面中的其他元素一样,使用原生DOM方法访问表单元素。每个表单都有elements属性,该属性是表单中所有元素的集合。这个elements集合是一个有序列表,其中包含着表单中的所有字段,例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在elements集合中的顺序与他们出现在标记中的顺序相同,可以按照位置和name特性来访问它们。
<form id="myForm" method="post"> <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> <script type="text/javascript"> 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 </script>
1.共有表单字段属性
表单字段共有的属性和方法如下:
disabled:布尔值,表示当前字段是否被禁用。
form:指向当前字段所属表单的指针;只读。
name:当前字段的名字。
readOnly:布尔值,表示当前字段是否只读。
tabIndex:表示当前字段的切换(tab)序号。
type:当前字段的类型,如“checkbox”、“radio”,等等。
value:当前字段将被提交给服务器的值。
var form = document.getElementById("myForm"); var field = form.elements[0]; field.value = "Another value"; //alert(field.form == form); field.focus(); //把焦点设置到当前字段 field.disabled = true; //禁用当前字段
避免多次提交表单
var form = document.getElementById("myForm"); EventUtil.addHandler(form,"submit",function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); var btn = target.elements["btn"];//取得提交按钮 btn.disabled = true;//禁用它 });
注意:不能通过onclick事件处理程序来实现这个功能,原因是不同浏览器之间存在“时差”:有的浏览器会在触发表单的submit事件之前触发click事件,而有的浏览器则相反。对于先触发click事件的浏览器,意味着会在提交发生之前禁止按钮,结果永远都不会提交表单。因此,做好是通过submit事件来禁用提交按钮。
2.共有的表单字段方法 :focus() 和 blur()
focus() 方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件。
blur( ) 方法的作用是从元素中移走焦点,在调用blur( )方法时,并不会把焦点转移到某个特定的元素上,仅仅是将焦点从调用这个方法的元素上移走而已。
3.共有的表单字段事件
所有表单字段都支持下列3个事件:
blur :当前字段失去焦点时触发。
change:对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发。
focus:当前字段获得焦点时触发。
可以使用focus 和 blur 事件来以某种方式改变用户界面,要么是向用户给出视觉提示,要么是向界面中添加额外的功能。
change事件则经常用于验证用户在字段中输入的数据。
例子:一个只允许用户输入数值的文本框,利用focus事件修改文本框的背景颜色,表明这个字段获得了焦点,利用blur事件恢复文本框的背景颜色,利用change事件在用户输入了非数值字符时再次修改背景颜色。
EventUtil.addHandler(window, "load", function(event){ var textbox = document.getElementById("text1"); EventUtil.addHandler(textbox, "focus", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); 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 = ""; } }); textbox.focus(); });