(1).共有的表单字段属性
// 除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性;
属性 说明
disabled 布尔值,表示当前字段是否被禁用;
form 指向当前字段所属表单的指针,只读;
name 当前字段的名称;
readOnly 布尔值,表示当前字段是否只读;
tabIndex 表示当前字段的切换;
type 当前字段的类型;
value 当前字段的值;
fm.elements[0].value; // 获取和设置value;
fm.elements[0].disabled = true; // 禁用当前字段;
(2).共有的表单字段方法
方法 说明
focus() 将焦点定位到表单字段里;
blur() 从元素中将焦点移走;
(3).共有的表单字段事件
事件名 说明
blur 当字段失去焦点时触发;
change 对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发;
focus 当前字段获取焦点时触发;
// 利用focus事件修改文本框的背景色; // 利用change事件在用户输入非数值字符时再次修改背景色; var bextbox = document.forms[0].elements[0]; EventUtil.addHandler(textbox,'focus',function(evt){ evt = EventUtil.getEvent(evt); var target = EventUtil.getTarget(evt); if(target.style.backgroundColor != 'red'){ target.style.backgroundColor = 'yellow'; // 选中状态时文本框的背景是黄色; } }); EventUtil.addHandler(textbox,'blur',function(evt){ // 失去焦点事件; evt = EventUtil.getEvent(evt); var target = EventUtil.getTarget(evt); if(/[^\d]/.test(target.value)){ // 输入非数值字符时; target.style.backgroundColor = 'red'; // 文本框背景变成红色; }else{ target.style.backgroundColor = ''; } }); EventUtil.addHandler(textbox,'change',function(evt){ // 改变value值且失去焦点事件; evt = EventUtil.getEvent(evt); var target = EventUtil.getTarget(evt); if(/[^\d]/.test(target.value)){ target.style.backgroundColor = 'red'; // 文本框变成红色; }else{ target.style.backgroundColor = ''; } });
二 文本框脚本
// 在HTML中,有两种方式来表现文本框:
// 一种是单行文本框<input type="text">;
// 一种是多行文本框<textarea>;
1.获取value值
// 虽然<input>在字面上有value值,而<textarea>却没有,但可以通过value获取它们的值;
var textField = fm.elements[0];
var areaField = fm.elements[1];
alert(textField.value+','+areaField.value); // 得到<input>和<textarea>的value值;
// PS:使用表单的value是最推荐的,它是HTMLDOM中的属性,不建议使用标准的DOM的方法getAttribute();
// 原因是:对value属性的修改,不一定反映在DOM中;