在html中,表单是由
元素来表示的,而在javascript中,表单对应的则是htmlformelement类型;// htmlformelement继承了htmlelement;因此它拥有html元素具有的默认属性,别且还独有自己的属性和方法;
htmlformelement属性和方法
属性或方法 说明
acceptcharset 服务器能够处理的字符集;
action 接受请求的url;
elements 表单中所有控件的集合;
enctype 请求的编码类型;
length 表单中控件的数量;
method 要发送的http请求类型,通常是'get'或'post';
name 表单的名称;
target 用于发送请求和接受响应的窗口名称;
reset() 将所有表单重置;
submit() 提交表单;
1.获取表单对象;
document.getelementbyid('myform'); // 使用id获取
元素;
document.getelementsbytagname('form')[0]; // 使用获取form元素集合里的第一个元素;
document.forms[0]; // 使用forms的数字下标获取元素;
document.forms['myform']; // 使用forms的名称下标获取元素;2.提交表单
(1).通过事件对象,可以阻止submit的默认行为,submit事件的默认行为就是携带数据跳转到指定页面;
复制代码 代码如下:
addevent(fm,'submit',function(evt){
predef(evt);
});
(2).我们可以使用submit()方法来自定义触发submit事件;也就是说,并不一定非要点击submit按钮才能提交;
复制代码 代码如下:
if(e.ctrlkey && e.keycode ==13){
fm.submit(); // 判断按住了ctrl和enter键触发提交;
}
// ps:在表单中尽量避免使用name=submit或id=submit等命名,这会和submit()方法发生冲突导致无法提交;
(3).重复提交
// 当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,
// 从而使得重复提交了很多相同的请求,或造成错误或写入数据库多条相同信息;
复制代码 代码如下:
addevent(fm,'submit',function(evt){ // 模拟服务器延迟;
predef(evt);
settimeout(function(){ // 3秒后才处理提交到服务器;
fm.submit();
},3000);
});// 解决重复提交方案
// 第一种:提交之后,立刻禁用点击按钮;
document.getelementbyid('sub').disabled = true; // 将按钮禁用;
// 第二种:提交之后,取消后续的表单提交操作;
var flag = false; // 设置一个监听变量;
if(flag == true)return; // 如果存在则返回退出事件;
flag = true; // 否则确定是第一次,改变监听变量的值;
3.重置表单
// 用户点击重置按钮时,表单会被初始化;// 虽然这个按钮还得以保留,但目前web已经很少去使用了;因为用户填好信息后,不小心点击了重置就会全部清空,用户体验极差;// 有两种方法调用reset事件:第一个就是直接type=reset即可;第二个就是使用fm.reset()方法调用; // 不需要js代码即可实现; addevent(document,'click',function(){ fm.reset(); // 使用js方法实现重置; });
4.表单字段
// 表单处理中,建议使用htmldom,它有自己的elements属性,该属性是表单中所有元素的集合;
fm.elements[0]; // 获取第一个表单字段元素;
fm.elements['user']; // 获取name值是user的表单字段元素;
fm.elements.length; // 获取所有表单字段的数量;
(1).共有的表单字段属性
// 除了元素之外,所有表单字段都拥有相同的一组属性;
属性 说明
disabled 布尔值,表示当前字段是否被禁用;
form 指向当前字段所属表单的指针,只读;
name 当前字段的名称;
readonly 布尔值,表示当前字段是否只读;
tabindex 表示当前字段的切换;
type 当前字段的类型;
value 当前字段的值;
fm.elements[0].value; // 获取和设置value;
fm.elements[0].disabled = true; // 禁用当前字段;
(2).共有的表单字段方法
方法 说明
focus() 将焦点定位到表单字段里;
blur() 从元素中将焦点移走;
(3).共有的表单字段事件
事件名 说明
blur 当字段失去焦点时触发;
change 对于和元素,在改变value并失去焦点时触发;对于元素,在改变选项时触发;
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中,有两种方式来表现文本框:
// 一种是单行文本框;
// 一种是多行文本框;
1.获取value值
// 虽然在字面上有value值,而却没有,但可以通过value获取它们的值;
var textfield = fm.elements[0];
var areafield = fm.elements[1];
alert(textfield.value+','+areafield.value); // 得到和的value值;
// ps:使用表单的value是最推荐的,它是htmldom中的属性,不建议使用标准的dom的方法getattribute();
// 原因是:对value属性的修改,不一定反映在dom中;
// defaultvalue:得到原本的value值;不会因为值的改变而变化;
alert(textfield.defaultvalue); // 得到最初设置的value值;
2.选择文本
// 使用select()方法,可以将文本框里的内容选中,并将焦点设置到文本框中; textfield.select(); // 在文本框获得焦点时选择其所有文本;// 选取部分文本// 在使用文本框内容的时候,我们有时要直接选定部分文本,这个行为还没有标准;// firefox的解决方案是:setselectionrange()方法;它接受两个参数:索引和长度; textfield.setselectionrange(0,1); // 选择第一个字符; textfield.setselectionrange(0,textfield.value.length); // 选择全部; // ie8以下不支持这种写法,可以使用ie的范围操作代替; var range = textfield.createtextrange(); // 创建一个文本范围对象; range.collapse(true); // 将指针移动到起点; range.movestart('character',0); // 移动指针,character表示逐字移动; range.moveend('character',1); // 移动终点; range.select(); // 焦点选定;// 选择部分文本兼容函数 function selecttext(text,start,stop){ if(text.setselectionrange){ text.setselectionrange(start,stop); text.focus(); }else if(text.createtextrange){ var range = text.createtextrange(); range.collapse(true); range.movestart('character',start); range.moveend('character',sotp-start); range.select(); } }// 与select()方法对应的,是一个select事件,可以选中文本框文本后触发; addevent(textfield,'select',function(){ alert(this.value); // ie事件需要传递this才可以这么写; });
// 获得选择的文本// firefox提供了两个属性:selectionstart和selectionend; addevent(textfield,'select',function(){ alert(this.value.substring(this.selectionstart,this.selectionend)); }); // ie8以下,提供了另一个方案:selection对象,属于document; // 这个对象保存着用户在整个文档范围内选择的文本信息; // 兼容函数 function getselectext(text){ if(typeof text.selectioinstart =='number'){ // 非ie; return text.value.substring(text.selectionstart,text.selectionend); }else if(document.selection){ // ie; return document.selection.createrange().text; // 获取ie选择的文本; } } // ps:存在问题:ie在触发select事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符后释放鼠标键时再触发; // 所以使用alert()的话,导致跨浏览器的不兼容; // 所以我们可以通过将得到的选择文本赋值给别的对象; addevent(textfield,'select',function(){ // alert(getselectext(this)); // 导致用户行为结果不一致; document.getelementbyid('box').innerhtml = getselectext(this); })
3.过滤输入
// 为了使文本框输入指定的字符,我们必须对输入进文本框的字符进行验证; addevent(areafield,'keypress',function(evt){ var e = evt || window.event; var charcode = getcharcode(evt); // 得到字符编码; if(!/\d/.test(string.formcharcode(charcode)) && charcode>9 && !e.ctrlkey){ predef(evt); // 条件阻止默认; } }); // ps:前半段条件判断只有数字才可以输入,导致常规按键,比如光标键/退格键/删除键等无法使用; // 部分浏览器比如firefox,需要解放这些键,而非字符触发的编码均为0; // 在safari3之前的浏览器,也会被阻止,而它对应的字符编码全部为8,所以最后加上charcode>9的判断; // 确保用户没有按下ctrl键;
// 阻止文本框裁剪/复制和粘贴;事件名 说明copy 在发生复制操作时触发;cut 在发生裁剪操作时触发;paste 在发生粘贴操作时触发;beforecopy 在发生复制操作时触发;beforecut 在发生裁剪操作时触发;beforepaste 在发生粘贴操作时触发;// 如果我们想要禁用裁剪/复制/粘贴,那么可以阻止默认行为即可; addevent(areafield,'cut',function(evt){ predef(evt); }); addevent(areafield,'copy',function(evt){ predef(evt); }); addevent(areafield,'paste',function(evt){ predef(evt); });// 最后一个影响输入的因素,就是:输入法;// 中文输入法,它的原理是在输入法面板上先储存文本,按下回车就写入英文文本,按下空格就写入中文文本;// 解决方案:通过css来禁止调出输入法; style='ime-mode:disabled'; // css直接编写; areafield.style.imemode='disabled'; // 在js中设置; // ps:chrome无法禁止输入法调出,所以,最后使用正则验证已输入的文本; addevent(areafield,'keyup',function(evt){ this.value = this.value.replace(/[^\d]/g,''); // 把非数字都替换成空; });
4.自动切换焦点
// 为了增加表单字段的易用性,很多字段在满足一定条件时(比如长度),就会自动切换到下一个字段上继续填写; // 只能写1个; function tabforward(evt){ var e = evt || window.event; var target = gettarget(evt); // 判断当前长度是否和指定长度一致; if(target.value.length == target.maxlength){ // 遍历所有字段; for(var i=0; i
选择框是通过和元素创建的;
htmlselectelement对象
属性/方法 说明
add(new,rel) 插入新元素,并指定位置;
multiple 布尔值,是否允许多项选择;
options 元素的htmlcollection集合;
remove(index) 移除给定位置的选项;
selectedindex 基于0的选中项的索引,如果没有选中项,则值为-1;
size 选择框中可见的行数;
// 在dom中,每个元素都有一个htmloptionelement对象,以便访问数据;
htmloptionelement对象
属性 说明
index 当前选项在options集合中的索引;
label 当前选项的标签;
selected 布尔值,表示当前选项是否被选中;
text 选项的文本;
value 选项的值;
var city = fm.elements['city']; // htmlselectelement; alert(city.options); // htmloptionscollection; alert(city.options[0]); // htmloptionelement; alert(city.type); // select-one; // ps:选择框里的type属性有可能是:select-one,也有可能是:select-multiple; // 这取决于html代码中有没有multiple属性; alert(city.options[0].text); // 上海text,获取text值; alert(city.options[0].value); // 上海value,获取value值; // ps:操作select时,最好使用htmldom,以为浏览器兼容性比较好; // 如果使用标准dom,会因为不同的浏览器导致不同的结果; // ps:当选项没有value值的时候,ie会返回空字符串,其他浏览器会返回text值;
2.选择选项
对于只能选择一项的选择框,使用selectedindex属性最为简单;
复制代码 代码如下:
addevent(city,'change',function(){
alert(this.selectedindex); // 得到当前选项的索引,从0开始;
alert(this.options[this.selectedindex].text); // 得到当前选项的text值;
alert(this.options[this.selectedindex].value); // 得到当前选项的value值;
});
city.selectedindex = 1; // 设置selectedindex可以定位某个索引;
通过option的属性selected(布尔值),也可以设置定位某个索引,设置为true即可;
city.options[0].selected = true; // 设置第一个索引;
selected和selectedindex区别:
1.selected是返回的布尔值;所以一般用于判断上;
2.selectedindex返回的是数值,一般用于设置和获取;
复制代码 代码如下:
addevent(city,'change',function(){
if(this.options[2].selected == true){ // 判断第三个选项是否被选定;
alert('正确!');
}
});
3.添加选项
// 如需要动态的添加选项,我们提供两种方案:dom和option构造函数;
(1).dom
var option = document.createelement('option');
option.appendchild(document.createtextnode('北京 text'));
option.setattribute('value','北京 value');
city.appendchild(option);
(2).option构造函数
var option = new option('北京 text','北京 value');
city.appendchild(option); // ie出现bug;
(3).使用add()方法来添加选项:
var option = new option('北京 text','北京 value');
city.add(option,0); // 0,表示添加到第一位;
// ps:在dom规定,add()中两个参数是必须的,如果不正确索引,那么第二个参数设置null即可,即默认移入最后一个选项;
// 但在ie中第二个参数是可选的,所以设置null表示放入不存在的位置,导致失踪;
// 为了兼容性,可以传递undefined即可兼容;
city.add(option,null); // ie不显示了;
city.add(option,undefined); // 兼容;
4.移除选项
// 有三种方式可以移除某一个选项:dom移除/remove()方法移除和null移除;city.removechild(city.option[0]); // dom移除;city.remove(0); // remove()移除,推荐;city.options[0] = null; // null移除;// ps:当第一项移除后,下面的项,往上移,所以不停的移除第一项,即可全部移除;
5.移动选项
// 如果有两个选择框,把第一个选择框里的第一个选项移到第二个选择框里,并且第一个选择框里的第一项被移除;var city = fm.elements['city']; // 第一个选择框;var info = fm.elements['info']; // 第二个选择框;info.appendchild(city.options[0]); // 移动,并在第一个选择框中删除;
6.排列选项
选择框提供了一个index属性,可以得到当前选项的索引值,和selectedindex的区别是,一个是选择框对象的调用,一个是选项对象的调用;
复制代码 代码如下:
var option1 = city.options[1];
city.insertbefore(option1,city.options[option1.index-1]); // 往上移位;
7.单选按钮
// 通过checked属性来获取单选按钮的值; for(var i=0; i
// 通过checked属性来获取复选按钮的值, var love = ''; for(var i=0; i