9. 表单处理
9.1 表单的基础知识
1 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement。 2 //属性:action、method、acceptCharset 3 4 ///【获取表单】 5 var form = document.getElementById('form1');//通过给<from>标签添加ID 6 var from2 = document.froms['form_name'];//通过<form>的name属性获得 7 8 9 ///【提交表单】 10 //浏览器将请求发送给服务器之前会触发 submit事件 ,这样就可以验证是否能提交 11 //注意 提交按钮的onsubmit无效 12 var form = document.forms['form']; 13 form.addEventListener('submit',function(event){ 14 if(form.childern[0].getAttribute('value')<10){ 15 alert('small'); 16 event.preventDefault(); 17 } 18 },false) 19 20 form.submit(); //提交表单,不会触发 onsubmit 事件 21 form.reset(); //重置表单,会触发 onreset 事件 22 23 24 25 ///【表单字段】 26 //访问表单字段 27 form.elements;//elements时所有表单元素的集合,非表单元素(p,a,div等)不在里面 28 form.elements[0];//取得表单的第一个字段 29 form.elements['user'];//取得name 为 user的字段。如果多个表单空间使用一个name(如单选按钮),那么就返回一个NodeList 30 31 //共有的表单字段属性 32 //type value disable(布尔值) readOnly(布尔值) 等等 33 34 //共有的表单字段方法 35 form.elements[0].focus();//让表单的某个元素获得焦点 36 form.elements[0].blur();//让表单的某个元素失去焦点 37 38 //共有的表单字段事件 39 //onblur失去焦点触发 onchange内容发生改变时触发 onfocus获得焦点触发
9.2 文本框脚本
//不要使用setAttribute() 和 getAttribute() 修改和获得文本框的值,因为获取不到,不要用标准DOM form.elements[0].value='xxx';//使用这种方式修改 ///【选择文本】 form.elements[0].select();//选中文本框的所有文本 ///选择(select)事件 //当选择了文本,并且释放了鼠标,才会触发select事件,select()方法也会触发select()事件 //取得所选择的文本 //两个属性(属于文本框对象)表示选择文本的开头和结尾的偏移量:selectionStart selectionEnd form.elements[0].onselect = function(){ alert(this.value.substring(this.selectionStart,this.selectionEnd)); } //选择部分文本 //参数形式和substring一样,不包括end form.elements[0].setSelectionRange(start,end);// ///【操作剪贴板】 /* 【事件】 oncopy 在复制操作发生时触发 oncut 在剪切操作发生时触发 onpaste 在粘贴操作发生时触发 */ //屏蔽字符 form.elements[0].onkeypress = function(e){ if(!/\d/.test(String.fromCharCode(e.charCode))){//使之只能输入数字,不过还可以粘贴 e.preventDefault(); } } form.elements[0].onpaste = function(e){ alert('禁止粘贴'); e.preventDefault(); } //【操作剪贴板数据】 //安全起见,浏览器只允许在发生对应的剪贴板事件时,才可以操作剪贴板数据 //通过 clipbroadData 对象访问:getData('MIME')、setData('MIME','data')、clearData() document.onpaste = function(event){ event.getData('text/plain') //粘贴只能getData(),复制只能setData() }
9.3 选择框脚本
//待学习
9.4 操作富文本
//待学习