首页 > 网站 > WEB开发 > 正文

JavaScript--表单处理(27)

2024-04-27 14:11:01
字体:
来源:转载
供稿:网友

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){
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表