Javascript表单
2016-04-09 22:37
423 查看
PS:本博客中的添加函数、阻止默认行为等方法依照封装的basic.js
获取form的所有方法
var fm = document.getElementById(‘myForm’);
var fm = document.getElementsByTagName(‘form’)[0]; //HTML DOM通过0下标获取
var fm = document.forms[0];
var fm = document.forms[‘yourForm’]; //HTML DOM 通过name下标获取(常用)
var fm = document.youForm;
submit事件
PS:submit按钮是是无法通过input来触发,必须把submit绑定到form,由form触发submit
form中的input textarea文本
ps:在html中input有value属性,textarea没有value属性
在js中input和textarea都有value属性
选定文本
过滤输入模式(两种模式)
自动切换焦点
选择脚本 选择框脚本是通过和元素创建的
获取form的所有方法
var fm = document.getElementById(‘myForm’);
var fm = document.getElementsByTagName(‘form’)[0]; //HTML DOM通过0下标获取
var fm = document.forms[0];
var fm = document.forms[‘yourForm’]; //HTML DOM 通过name下标获取(常用)
var fm = document.youForm;
submit事件
PS:submit按钮是是无法通过input来触发,必须把submit绑定到form,由form触发submit
//html部分 <body> <form id="myForm" name="yourForm"> 姓名:<input type="text" name="user"/> <input type="radio" name="sex" value="男" checked="checked"/>男 <input type="radio" name="sex" value="女"/>女 <input type="reset" value="重置"/> <input id="sub" type="submit" value="提交"/> </form>
addEvent(window,'load',function(){ var sub = document.getElementById('sub'); addEvent(sub,'submit',function(evt){ //通过input阻止是无效的 preDef(evt); })
addEvent(window,'load',function(){ var fm = document.getElementById('myForm'); addEvent(fm,'submit',function(evt){ preDef(evt); //阻止默认事件 有效 }) })
//使用fm.submit()让非sumbit按钮实现提交 addEvent(window,'load',function(){ var btn = document.getElementById('btn'); addEvent(btn,'click',function(){ fm.submit(); //可以让非submit按钮提交表单 }) })
//ctrl+enter实现提交 addEvent(window,'load',function(){ addEvent(document,'keydown',function(evt){ var e=evt||window.event; if (e.ctrlKey&&e.keyCode==13) { fm.submit(); }; }) // PS:在表单中尽量避免使用name='submit'或id='submit'等命名,这样会导致和submit()方法发生冲突导致无法提交 })
//重复提交 //PS:提交数据最大的问题就是重复提交表单,因为各种问题,当一条数据提交到服务器的时候会出现延时等长时间没反应,导致用户不停的点击,从使得重复提交了很多相同的请求,或造成错误,或写入数据库多条相同的信息 addEvent(window,'load',function(){ var fm = document.getElementById('myForm'); var flag = false; //阻止提交 addEvent(fm,'submit',function(evt){ preDef(evt); //方法一(这种方法仅限于通过提交按钮防止重复提交的) document.getElementById('sub').disabled=true; //第一次提交后,将按钮禁用 //方法二 (方法一和方法二结合使用,完美) if (flag==true) return; flag=true; //表示我已经提交过一次了 alert('提交'); //模拟延时 setTimeout(function(){ fm.submit(); },5000) }) })
//公有的表单字段方法 :focus() 和 blur() var user = fm.elements['user']; user.focus(); //将焦点移入 user.blur(); //将焦点移除 //表单共有的字段事件:focus;blur ;change var user = fm.elements['user']; addEvent(user,'focus',function(){ alert('lll'); }) addEvent(user,'blur',function(){ alert('lll'); }) addEvent(user,'change',function(){ alert('lll'); })
form中的input textarea文本
ps:在html中input有value属性,textarea没有value属性
在js中input和textarea都有value属性
//html部分 <body> <form id="myForm" name="yourForm"> 姓名:<input type="text" name="user" value="text" /><br/> <p id="p"></p> <textarea name="content">textarea</textarea> </form> </body> //使用标准DOM获取 // alert(user.getAttribute('value')); // alert(content.getAttribute('value')); //IE可获取,非IE获取不到 // alert(user.getAttribute('value')); //标准DOM无法获取更改后的value值
选定文本
//选定文本方法 user.select(); //选定文本 //选定部分文本方法(从第n个位置到第m个位置) user.setSelectionRange(0,1); //选定从第0个位置到第1个位置的文本 user.setSelectionRange(0,user.value.length); //选择全部 //IE选择部分文本(IE从n个开始选择m个) var range = user.createTextRange(); range.collapse(true); //将文本指针移到开头 range.moveStart('charater',0); //逐字移动 ,0开始 range.moveEnd('charater',1); // 同上 rage.select() //跨浏览器选定部分文本 function getSelectText(text,start,num){ if (text.setSelectionRange) { text.setSelectionRange(start,num); text.focus(); }else if(text.createTextRange){ var range = user.createTextRange(); range.collapse(true); range.moveStart('charater',start); range.moveEnd('charater',num-start); //用最后的位置-开始的位置=个数 rage.select(); } } getSelectText(user,2,3); //取得选择的文本 addEvent(user,'select',function(){ // alert(this.selectionStart); // alert(this.selectionEnd); alert(this.value.substring(user.selectionStart,user.selectionEnd)); //IE不支持 }) //兼容取得部分文本 addEvent(window,'load',function(){ var fm = document.getElementById('myForm'); var user = fm.elements['user']; var content = fm.elements['content']; addEvent(user,'select',function(){ document.getElementById('p').innerHTML==getSelectText(user); }) function getSelectText(text){ if(typeof selectionStart=='number'){ return text.value.substring(text.selectionStart,text.selectionEnd); }else if(document.selection){ return document.selection.createRange().text; } } })
过滤输入模式(两种模式)
//模式1.禁止或屏蔽非数字键的输入,阻止非数字键的默认行为即可 //屏蔽非数字键的输入 addEvent(content,'keypress',function(evt){ var e=evt||window.event; var charCode=getCharCode(evt); // alert(charCode); // alert(String.fromCharCode(charCode)); //将编码转换成自己本身 1就是1 a就是a //正则表达式来获取文本是否为数字 if(!/\d/.test(String.fromCharCode(charCode))&&charCode>8){ preDef(evt); //屏蔽非数字键盘的使用 } }) //模式2.验证后取消,你可以先输入非法字符,判断后,取消你刚输入的文本 //验证数据非法后取消输入 addEvent(content,'keyup',function(evt){ this.value=this.value.replace(/[^\d]/g,''); //将非数字键转换成空 })
自动切换焦点
addEvent(window,'load',function(){ var fm = document.getElementById('myForm'); var user = fm.elements['user']; var content = fm.elements['content']; //自动切换焦点 addEvent(fm.elements['a1'],'keyup',tabForWard); addEvent(fm.elements['a2'],'keyup',tabForWard); addEvent(fm.elements['a3'],'keyup',tabForWard); function tabForWard(evt){ var e=evt||window.event; //判断当前的长度是否和输入的长度一致 if(this.value.length==this.maxlength){ //遍历所有控件 for(var i=0;i<fm.elements.length;i++){ if(fm.elements[i]==this){ fm.elements[i+1].focus(); return; } } } } })
选择脚本 选择框脚本是通过和元素创建的
//html部分 <form id="myForm" name="yourForm"> <select name="city" > <option value="上海">上海s</option> <option value="南京">南京s</option> <option value="南昌">南昌s</option> <option>无</option> </select> </form> //js部分 /* 选择框脚本 选择框脚本是通过<select>和<option>元素创建的 // alert('city'); // city.multiple=true; // city.size=6; // alert(city.options.length); // alert(city.options[0]); // alert(city.type) //判断是单行还是多行 // alert(city.options[0].value+city.options[0].text) //上海上海s //value和text使用的是HTML DOM 方法, //使用标准DOM(不建议使用) // alert(city.options[0].getAttribute('value')+city.options[0].firstChild.nodeValue) //上海s // alert(city.options[4].value) //addEvent(city,'change',function(){ // alert(this.selectedIndex); //得到当前选项卡的索引 // alert(this.options[this.selectedIndex].value+'----'+this.options[this.selectedIndex].text); // }) //这个定位必须在select对象上 // city.selectedIndex=4; //定位到某个索引 //这个定位必须在option对象上 city.options[1].selected='true'; //定位到某个索引 //select和seletIndex在用途上的最大区别是selected返回的是布尔值,座椅一般用于判断,selectedIndex返回的是数值,一般用于设置和获取 addEvent(city,'change',function(){ if (city.options[3].selected) { alert('正确'); }else{ alert('错误'); } }) //标准DOM添加选项 var option = document.createElement('option'); var text = document.createTextNode('萍乡s'); city.appendChild(option); option.setAttribute('value','萍乡') option.appendChild(text); //使用option构造函数添加 var option = new Option('杭州s','杭州'); // city.appendChild(option); //IE不兼容 //使用add方法来添加选项 city.add(option,0); //0非IE不兼容 city.add(option,null); //null表示不存在的位置,但本身存在 city.add(option,undefined); //最佳兼容方案 // 标准DOM移除选项 // city.removeChild(city.options[0]); // city.remove(0); // city.remove(0); // city.remove(0); // city.options[0]=null; //移动选项 addEvent(city,'click',function(){ info.appendChild(this.options[city.selectedIndex]); }) */ addEvent(window,'load',function(){ var fm = document.getElementById('myForm'); var city = fm.elements['city']; // var info = fm.elements['info']; // alert(city.selectedIndex) // alert(city.options[0].index) //交换位置 var option1 =city.options[2]; // var option2 = city.options[2]; city.insertBefore(option1,city.options[option1.index-1]); })
相关文章推荐
- 【js】:js如何实现给网页某一地方显示指定内容
- 【js】:html代码如何嵌入js文件
- html5--位置感知(基于js的地理定位geolocation API)结合Google Maps
- js取float型小数点后两位数的方法
- a标签根据js返回值判断页面是否跳转
- javaScript中的自定义类型和继承
- [Web API] Client 指定請求及回應格式(xml/json)
- 深入理解JavaScript系列(23):JavaScript与DOM(上)——也适用于新手
- JSP九大内置对象详解(二)
- 【js】:一个含有输入格的js程序
- IEjs 调试、火狐 js 调试
- jsp中radio的性别信息的数据回显
- js获取url中传递的参数
- CommonJs,AMD,CMD是什么?
- 一些常见跨浏览器方法的封装(basic.js)
- JSP九大内置对象详解(一)
- 使用clipboard.js复制页面内容到剪切板
- 图说js中的this——深入理解javascript中this指针
- JavaScript数组删除项的方法
- JavaScript数组增加新的项