Javascript表单
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
//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]);
})