标签:
// 在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型;
1 // HTMLFormElement继承了HTMLElement;因此它拥有HTML元素具有的默认属性,别且还独有自己的属性和方法; 2 HTMLFormElement属性和方法 3 属性或方法 说明 4 acceptCharset 服务器能够处理的字符集; 5 action 接受请求的URL; 6 elements 表单中所有控件的集合; 7 enctype 请求的编码类型; 8 length 表单中控件的数量; 9 method 要发送的HTTP请求类型,通常是‘get‘或‘post‘; 10 name 表单的名称; 11 target 用于发送请求和接受响应的窗口名称; 12 reset() 将所有表单重置; 13 submit() 提交表单;
1 1.获取表单<form>对象; 2 document.getElementById(‘myForm‘); // 使用ID获取<form>元素; 3 document.getElementsByTagName(‘form‘)[0]; // 使用获取form元素集合里的第一个元素; 4 document.forms[0]; // 使用forms的数字下标获取元素; 5 document.forms[‘myForm‘]; // 使用forms的名称下标获取元素;
1 2.提交表单 2 (1).通过事件对象,可以阻止submit的默认行为,submit事件的默认行为就是携带数据跳转到指定页面; 3 addEvent(fm,‘submit‘,function(evt){ 4 preDef(evt); 5 }); 6 7 (2).我们可以使用submit()方法来自定义触发submit事件;也就是说,并不一定非要点击submit按钮才能提交; 8 if(e.ctrlKey && e.keyCode ==13){ 9 fm.submit(); // 判断按住了ctrl和enter键触发提交; 10 } 11 // PS:在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交; 12 13 (3).重复提交 14 // 当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交, 15 // 从而使得重复提交了很多相同的请求,或造成错误或写入数据库多条相同信息; 16 addEvent(fm,‘submit‘,function(evt){ // 模拟服务器延迟; 17 preDef(evt); 18 setTimeout(function(){ // 3秒后才处理提交到服务器; 19 fm.submit(); 20 },3000); 21 }); 22 23 // 解决重复提交方案 24 // 第一种:提交之后,立刻禁用点击按钮; 25 document.getElementById(‘sub‘).disabled = true; // 将按钮禁用; 26 // 第二种:提交之后,取消后续的表单提交操作; 27 var flag = false; // 设置一个监听变量; 28 if(flag == true)return; // 如果存在则返回退出事件; 29 flag = true; // 否则确定是第一次,改变监听变量的值;
1 3.重置表单 2 // 用户点击重置按钮时,表单会被初始化; 3 // 虽然这个按钮还得以保留,但目前Web已经很少去使用了;因为用户填好信息后,不小心点击了重置就会全部清空,用户体验极差; 4 // 有两种方法调用reset事件:第一个就是直接type="reset"即可;第二个就是使用fm.reset()方法调用; 5 <input type="reset" value="重置" /> // 不需要JS代码即可实现; 6 addEvent(document,‘click‘,function(){ 7 fm.reset(); // 使用JS方法实现重置; 8 });
1 4.表单字段 2 // 表单处理中,建议使用HTMLDOM,它有自己的elements属性,该属性是表单中所有元素的集合; 3 fm.elements[0]; // 获取第一个表单字段元素; 4 fm.elements[‘user‘]; // 获取name值是user的表单字段元素; 5 fm.elements.length; // 获取所有表单字段的数量; 6 7 (1).共有的表单字段属性 8 // 除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性; 9 属性 说明 10 disabled 布尔值,表示当前字段是否被禁用; 11 form 指向当前字段所属表单的指针,只读; 12 name 当前字段的名称; 13 readOnly 布尔值,表示当前字段是否只读; 14 tabIndex 表示当前字段的切换; 15 type 当前字段的类型; 16 value 当前字段的值; 17 fm.elements[0].value; // 获取和设置value; 18 fm.elements[0].disabled = true; // 禁用当前字段; 19 20 (2).共有的表单字段方法 21 方法 说明 22 focus() 将焦点定位到表单字段里; 23 blur() 从元素中将焦点移走; 24 25 (3).共有的表单字段事件 26 事件名 说明 27 blur 当字段失去焦点时触发; 28 change 对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发; 29 focus 当前字段获取焦点时触发; 30 31 // 利用focus事件修改文本框的背景色; 32 // 利用change事件在用户输入非数值字符时再次修改背景色; 33 var bextbox = document.forms[0].elements[0]; 34 EventUtil.addHandler(textbox,‘focus‘,function(evt){ 35 evt = EventUtil.getEvent(evt); 36 var target = EventUtil.getTarget(evt); 37 if(target.style.backgroundColor != ‘red‘){ 38 target.style.backgroundColor = ‘yellow‘; // 选中状态时文本框的背景是黄色; 39 } 40 }); 41 42 EventUtil.addHandler(textbox,‘blur‘,function(evt){ // 失去焦点事件; 43 evt = EventUtil.getEvent(evt); 44 var target = EventUtil.getTarget(evt); 45 if(/[^\d]/.test(target.value)){ // 输入非数值字符时; 46 target.style.backgroundColor = ‘red‘; // 文本框背景变成红色; 47 }else{ 48 target.style.backgroundColor = ‘‘; 49 } 50 }); 51 52 EventUtil.addHandler(textbox,‘change‘,function(evt){ // 改变value值且失去焦点事件; 53 evt = EventUtil.getEvent(evt); 54 var target = EventUtil.getTarget(evt); 55 if(/[^\d]/.test(target.value)){ 56 target.style.backgroundColor = ‘red‘; // 文本框变成红色; 57 }else{ 58 target.style.backgroundColor = ‘‘; 59 } 60 });
// 在HTML中,有两种方式来表现文本框:
// 一种是单行文本框<input type="text">;
// 一种是多行文本框<textarea>;
1 1.获取value值 2 // 虽然<input>在字面上有value值,而<textarea>却没有,但可以通过value获取它们的值; 3 var textField = fm.elements[0]; 4 var areaField = fm.elements[1]; 5 alert(textField.value+‘,‘+areaField.value); // 得到<input>和<textarea>的value值; 6 // PS:使用表单的value是最推荐的,它是HTMLDOM中的属性,不建议使用标准的DOM的方法getAttribute(); 7 // 原因是:对value属性的修改,不一定反映在DOM中; 8 9 // defaultValue:得到原本的value值;不会因为值的改变而变化; 10 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才可以这么写; });
1 // 获得选择的文本 2 // Firefox提供了两个属性:selectionStart和selectionEnd; 3 addEvent(textField,‘select‘,function(){ 4 alert(this.value.substring(this.selectionStart,this.selectionEnd)); 5 }); 6 // IE8以下,提供了另一个方案:selection对象,属于document; 7 // 这个对象保存着用户在整个文档范围内选择的文本信息; 8 // 兼容函数 9 function getSelecText(text){ 10 if(typeof text.selectioinStart ==‘number‘){ // 非IE; 11 return text.value.substring(text.selectionStart,text.selectionEnd); 12 }else if(document.selection){ // IE; 13 return document.selection.createRange().text; // 获取IE选择的文本; 14 } 15 } 16 // PS:存在问题:IE在触发select事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符后释放鼠标键时再触发; 17 // 所以使用alert()的话,导致跨浏览器的不兼容; 18 // 所以我们可以通过将得到的选择文本赋值给别的对象; 19 addEvent(textField,‘select‘,function(){ 20 // alert(getSelecText(this)); // 导致用户行为结果不一致; 21 document.getElementById(‘box‘).innerHTML = getSelecText(this); 22 })
1 3.过滤输入 2 // 为了使文本框输入指定的字符,我们必须对输入进文本框的字符进行验证; 3 addEvent(areaField,‘keypress‘,function(evt){ 4 var e = evt || window.event; 5 var charCode = getCharCode(evt); // 得到字符编码; 6 if(!/\d/.test(String.formCharCode(charCode)) && charCode>9 && !e.ctrlKey){ 7 preDef(evt); // 条件阻止默认; 8 } 9 }); 10 // PS:前半段条件判断只有数字才可以输入,导致常规按键,比如光标键/退格键/删除键等无法使用; 11 // 部分浏览器比如Firefox,需要解放这些键,而非字符触发的编码均为0; 12 // 在Safari3之前的浏览器,也会被阻止,而它对应的字符编码全部为8,所以最后加上charCode>9的判断; 13 // 确保用户没有按下ctrl键;
1 // 阻止文本框裁剪/复制和粘贴; 2 事件名 说明 3 copy 在发生复制操作时触发; 4 cut 在发生裁剪操作时触发; 5 paste 在发生粘贴操作时触发; 6 beforecopy 在发生复制操作时触发; 7 beforecut 在发生裁剪操作时触发; 8 beforepaste 在发生粘贴操作时触发; 9 // 如果我们想要禁用裁剪/复制/粘贴,那么可以阻止默认行为即可; 10 addEvent(areaField,‘cut‘,function(evt){ 11 preDef(evt); 12 }); 13 addEvent(areaField,‘copy‘,function(evt){ 14 preDef(evt); 15 }); 16 addEvent(areaField,‘paste‘,function(evt){ 17 preDef(evt); 18 }); 19 20 // 最后一个影响输入的因素,就是:输入法; 21 // 中文输入法,它的原理是在输入法面板上先储存文本,按下回车就写入英文文本,按下空格就写入中文文本; 22 // 解决方案:通过CSS来禁止调出输入法; 23 style=‘ime-mode:disabled‘; // CSS直接编写; 24 areaField.style.imeMode=‘disabled‘; // 在JS中设置; 25 // PS:Chrome无法禁止输入法调出,所以,最后使用正则验证已输入的文本; 26 addEvent(areaField,‘keyup‘,function(evt){ 27 this.value = this.value.replace(/[^\d]/g,‘‘); // 把非数字都替换成空; 28 });
1 4.自动切换焦点 2 // 为了增加表单字段的易用性,很多字段在满足一定条件时(比如长度),就会自动切换到下一个字段上继续填写; 3 <input type=‘text‘ name=‘user1‘ maxlength=‘1‘/> // 只能写1个; 4 <input type=‘text‘ name=‘user2‘ maxlength=‘2‘/> 5 <input type=‘text‘ name=‘user3‘ maxlength=‘3‘/> 6 function tabForward(evt){ 7 var e = evt || window.event; 8 var target = getTarget(evt); 9 // 判断当前长度是否和指定长度一致; 10 if(target.value.length == target.maxLength){ 11 // 遍历所有字段; 12 for(var i=0; i<fm.elements.length; i++){ 13 // 找到当前字段; 14 if(fm.elements[i]==target){ 15 // 就把焦点移入下一个字段; 16 if(fm.elements[i+1]){ 17 fm.elements[i+1].focus(); 18 } 19 // 中途返回; 20 return; 21 } 22 } 23 } 24 }
1 // 选择框是通过<select>和<option>元素创建的; 2 HTMLSelectElement对象 3 属性/方法 说明 4 add(new,rel) 插入新元素,并指定位置; 5 multiple 布尔值,是否允许多项选择; 6 options <option>元素的HTMLCollection集合; 7 remove(index) 移除给定位置的选项; 8 selectedIndex 基于0的选中项的索引,如果没有选中项,则值为-1; 9 size 选择框中可见的行数;
1 // 在DOM中,每个<option>元素都有一个HTMLOptionElement对象,以便访问数据; 2 HTMLOptionElement对象 3 属性 说明 4 index 当前选项在options集合中的索引; 5 label 当前选项的标签; 6 selected 布尔值,表示当前选项是否被选中; 7 text 选项的文本; 8 value 选项的值;
1 var city = fm.elements[‘city‘]; // HTMLSelectElement; 2 alert(city.options); // HTMLOptionsCollection; 3 alert(city.options[0]); // HTMLOptionElement; 4 alert(city.type); // select-one; 5 // PS:选择框里的type属性有可能是:select-one,也有可能是:select-multiple; 6 // 这取决于HTML代码中有没有multiple属性; 7 8 alert(city.options[0].text); // 上海text,获取text值; 9 alert(city.options[0].value); // 上海value,获取value值; 10 // PS:操作select时,最好使用HTMLDOM,以为浏览器兼容性比较好; 11 // 如果使用标准DOM,会因为不同的浏览器导致不同的结果; 12 // 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(‘正确!‘); } });
1 3.添加选项 2 // 如需要动态的添加选项,我们提供两种方案:DOM和Option构造函数; 3 (1).DOM 4 var option = document.createElement(‘option‘); 5 option.appendChild(document.createTextNode(‘北京 text‘)); 6 option.setAttribute(‘value‘,‘北京 value‘); 7 city.appendChild(option); 8 9 (2).Option构造函数 10 var option = new Option(‘北京 text‘,‘北京 value‘); 11 city.appendChild(option); // IE出现bug; 12 13 (3).使用add()方法来添加选项: 14 var option = new Option(‘北京 text‘,‘北京 value‘); 15 city.add(option,0); // 0,表示添加到第一位; 16 // PS:在DOM规定,add()中两个参数是必须的,如果不正确索引,那么第二个参数设置null即可,即默认移入最后一个选项; 17 // 但在IE中第二个参数是可选的,所以设置null表示放入不存在的位置,导致失踪; 18 // 为了兼容性,可以传递undefined即可兼容; 19 city.add(option,null); // IE不显示了; 20 city.add(option,undefined); // 兼容;
1 4.移除选项 2 // 有三种方式可以移除某一个选项:DOM移除/remove()方法移除和null移除; 3 city.removeChild(city.option[0]); // DOM移除; 4 city.remove(0); // remove()移除,推荐; 5 city.options[0] = null; // null移除; 6 // PS:当第一项移除后,下面的项,往上移,所以不停的移除第一项,即可全部移除;
1 5.移动选项 2 // 如果有两个选择框,把第一个选择框里的第一个选项移到第二个选择框里,并且第一个选择框里的第一项被移除; 3 var city = fm.elements[‘city‘]; // 第一个选择框; 4 var info = fm.elements[‘info‘]; // 第二个选择框; 5 info.appendChild(city.options[0]); // 移动,并在第一个选择框中删除;
1 6.排列选项 2 // 选择框提供了一个index属性,可以得到当前选项的索引值,和selectedIndex的区别是,一个是选择框对象的调用,一个是选项对象的调用; 3 var option1 = city.options[1]; 4 city.insertBefore(option1,city.options[option1.index-1]); // 往上移位;
1 7.单选按钮 2 // 通过checked属性来获取单选按钮的值; 3 for(var i=0; i<fm.sex.length; i++){ // 循环单选按钮; 4 if(fm.sex[i].checked == true){ // 遍历每一个,找出处于选中状态的那一个; 5 alert(fm.sex[i].value); // 得到值; 6 } 7 } 8 // PS:除了checked属性之外,单选按钮还有一个defaultChecked按钮, 9 // 它获取的是原本的checked按钮对象,而不会因为checked的改变而改变; 10 if(fm.sex[i].defaultChecked == true){ 11 alert(fm.sex[i].value); 12 }
1 8.复选按钮 2 // 通过checked属性来获取复选按钮的值, 3 var love = ‘‘; 4 for(var i=0; i<fm.love.length; i++){ 5 if(fm.love[i].checked == true){ 6 love += fm.love[i].value; 7 } 8 } 9 alert(love);
标签:
原文地址:http://www.cnblogs.com/yizihan/p/4399019.html