addEvent(fm,'submit',function(evt){ // 模拟服务器延迟;
preDef(evt);
setTimeout(function(){ // 3秒后才处理提交到服务器;
fm.submit();
},3000);
});
// 解决重复提交方案 // 第一种:提交之后,立刻禁用点击按钮; document.getElementById('sub').disabled = true; // 将按钮禁用; // 第二种:提交之后,取消后续的表单提交操作; var flag = false; // 设置一个监听变量; if(flag == true)return; // 如果存在则返回退出事件; flag = true; // 否则确定是第一次,改变监听变量的值;
元素之外,所有表单字段都拥有相同的一组属性; 属性 说明 disabled 布尔值,表示当前字段是否被禁用; form 指向当前字段所属表单的指针,只读; name 当前字段的名称; readOnly 布尔值,表示当前字段是否只读; tabIndex 表示当前字段的切换; type 当前字段的类型; value 当前字段的值; fm.elements[0].value; // 获取和设置value; fm.elements[0].disabled = true; // 禁用当前字段;
(2).共有的表单字段方法 方法 说明 focus() 将焦点定位到表单字段里; blur() 从元素中将焦点移走;
(3).共有的表单字段事件
事件名 说明 blur 当字段失去焦点时触发; change 对于 和
// 利用focus事件修改文本框的背景色;
// 利用change事件在用户输入非数值字符时再次修改背景色;
var bextbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox,'focus',function(evt){
evt = EventUtil.getEvent(evt);
var target = EventUtil.getTarget(evt);
if(target.style.backgroundColor != 'red'){
target.style.backgroundColor = 'yellow'; // 选中状态时文本框的背景是黄色;
}
});
EventUtil.addHandler(textbox,'blur',function(evt){ // 失去焦点事件;
evt = EventUtil.getEvent(evt);
var target = EventUtil.getTarget(evt);
if(/[^\d]/.test(target.value)){ // 输入非数值字符时;
target.style.backgroundColor = 'red'; // 文本框背景变成红色;
}else{
target.style.backgroundColor = '';
}
});
EventUtil.addHandler(textbox,'change',function(evt){ // 改变value值且失去焦点事件;
evt = EventUtil.getEvent(evt);
var target = EventUtil.getTarget(evt);
if(/[^\d]/.test(target.value)){
target.style.backgroundColor = 'red'; // 文本框变成红色;
}else{
target.style.backgroundColor = '';
}
});
二 文本框脚本 // 在HTML中,有两种方式来表现文本框:
// 一种是单行文本框 ;
// 一种是多行文本框
1.获取value值
// 虽然 在字面上有value值,而
// defaultValue:得到原本的value值;不会因为值的改变而变化; 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才可以这么写;
});
// 获得选择的文本
// Firefox提供了两个属性:selectionStart和selectionEnd;
addEvent(textField,'select',function(){
alert(this.value.substring(this.selectionStart,this.selectionEnd));
});
// IE8以下,提供了另一个方案:selection对象,属于document;
// 这个对象保存着用户在整个文档范围内选择的文本信息;
// 兼容函数
function getSelecText(text){
if(typeof text.selectioinStart =='number'){ // 非IE;
return text.value.substring(text.selectionStart,text.selectionEnd);
}else if(document.selection){ // IE;
return document.selection.createRange().text; // 获取IE选择的文本;
}
}
// PS:存在问题:IE在触发select事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符后释放鼠标键时再触发;
// 所以使用alert()的话,导致跨浏览器的不兼容;
// 所以我们可以通过将得到的选择文本赋值给别的对象;
addEvent(textField,'select',function(){
// alert(getSelecText(this)); // 导致用户行为结果不一致;
document.getElementById('box').innerHTML = getSelecText(this);
})
3.过滤输入
// 为了使文本框输入指定的字符,我们必须对输入进文本框的字符进行验证;
addEvent(areaField,'keypress',function(evt){
var e = evt || window.event;
var charCode = getCharCode(evt); // 得到字符编码;
if(!/\d/.test(String.formCharCode(charCode)) && charCode>9 && !e.ctrlKey){
preDef(evt); // 条件阻止默认;
}
});
// PS:前半段条件判断只有数字才可以输入,导致常规按键,比如光标键/退格键/删除键等无法使用;
// 部分浏览器比如Firefox,需要解放这些键,而非字符触发的编码均为0;
// 在Safari3之前的浏览器,也会被阻止,而它对应的字符编码全部为8,所以最后加上charCode>9的判断;
// 确保用户没有按下ctrl键;
// 阻止文本框裁剪/复制和粘贴;
事件名 说明
copy 在发生复制操作时触发;
cut 在发生裁剪操作时触发;
paste 在发生粘贴操作时触发;
beforecopy 在发生复制操作时触发;
beforecut 在发生裁剪操作时触发;
beforepaste 在发生粘贴操作时触发;
// 如果我们想要禁用裁剪/复制/粘贴,那么可以阻止默认行为即可;
addEvent(areaField,'cut',function(evt){
preDef(evt);
});
addEvent(areaField,'copy',function(evt){
preDef(evt);
});
addEvent(areaField,'paste',function(evt){
preDef(evt);
});
// 最后一个影响输入的因素,就是:输入法;
// 中文输入法,它的原理是在输入法面板上先储存文本,按下回车就写入英文文本,按下空格就写入中文文本;
// 解决方案:通过CSS来禁止调出输入法;
style='ime-mode:disabled'; // CSS直接编写;
areaField.style.imeMode='disabled'; // 在JS中设置;
// PS:Chrome无法禁止输入法调出,所以,最后使用正则验证已输入的文本;
addEvent(areaField,'keyup',function(evt){
this.value = this.value.replace(/[^\d]/g,''); // 把非数字都替换成空;
});
4.自动切换焦点
三 选择框脚本
选择框是通过和元素创建的;
HTMLSelectElement对象
属性/方法 说明 add(new,rel) 插入新元素,并指定位置; multiple 布尔值,是否允许多项选择; options 元素的HTMLCollection集合; remove(index) 移除给定位置的选项; selectedIndex 基于0的选中项的索引,如果没有选中项,则值为-1; size 选择框中可见的行数;
// 在DOM中,每个元素都有一个HTMLOptionElement对象,以便访问数据; HTMLOptionElement对象 属性 说明 index 当前选项在options集合中的索引; label 当前选项的标签; selected 布尔值,表示当前选项是否被选中; text 选项的文本; value 选项的值;
var city = fm.elements['city']; // HTMLSelectElement;
alert(city.options); // HTMLOptionsCollection;
alert(city.options[0]); // HTMLOptionElement;
alert(city.type); // select-one;
// PS:选择框里的type属性有可能是:select-one,也有可能是:select-multiple;
// 这取决于HTML代码中有没有multiple属性;
alert(city.options[0].text); // 上海text,获取text值;
alert(city.options[0].value); // 上海value,获取value值;
// PS:操作select时,最好使用HTMLDOM,以为浏览器兼容性比较好;
// 如果使用标准DOM,会因为不同的浏览器导致不同的结果;
// 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('正确!');
}
});
3.添加选项 // 如需要动态的添加选项,我们提供两种方案:DOM和Option构造函数; (1).DOM var option = document.createElement('option'); option.appendChild(document.createTextNode('北京 text')); option.setAttribute('value','北京 value'); city.appendChild(option);
(2).Option构造函数 var option = new Option('北京 text','北京 value'); city.appendChild(option); // IE出现bug;
(3).使用add()方法来添加选项: var option = new Option('北京 text','北京 value'); city.add(option,0); // 0,表示添加到第一位; // PS:在DOM规定,add()中两个参数是必须的,如果不正确索引,那么第二个参数设置null即可,即默认移入最后一个选项; // 但在IE中第二个参数是可选的,所以设置null表示放入不存在的位置,导致失踪; // 为了兼容性,可以传递undefined即可兼容; city.add(option,null); // IE不显示了; city.add(option,undefined); // 兼容;
4.移除选项
// 有三种方式可以移除某一个选项:DOM移除/remove()方法移除和null移除;
city.removeChild(city.option[0]); // DOM移除;
city.remove(0); // remove()移除,推荐;
city.options[0] = null; // null移除;
// PS:当第一项移除后,下面的项,往上移,所以不停的移除第一项,即可全部移除;
5.移动选项
// 如果有两个选择框,把第一个选择框里的第一个选项移到第二个选择框里,并且第一个选择框里的第一项被移除;
var city = fm.elements['city']; // 第一个选择框;
var info = fm.elements['info']; // 第二个选择框;
info.appendChild(city.options[0]); // 移动,并在第一个选择框中删除;
6.排列选项
选择框提供了一个index属性,可以得到当前选项的索引值,和selectedIndex的区别是,一个是选择框对象的调用,一个是选项对象的调用;
复制代码 代码如下:
var option1 = city.options[1];
city.insertBefore(option1,city.options[option1.index-1]); // 往上移位;
7.单选按钮
// 通过checked属性来获取单选按钮的值;
for(var i=0; i
8.复选按钮
// 通过checked属性来获取复选按钮的值,
var love = '';
for(var i=0; i