JavaScript--表单处理(27)

一 表单介绍 

// 在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);