二十二节,JavaScript表单处理"/>
第一百二十二节,JavaScript表单处理
JavaScript表单处理
学习要点:
1.表单介绍
2.文本框脚本
3.选择框脚本
为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面。
一.表单介绍
在HTML中,表单是由<form>元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型。HTMLFormElement继承了HTMLElement,因此它拥有HTML元素具有的默认属性,并且还独有自己的属性和方法:
HTMLFormElement属性和方法
属性或方法 | 说明 |
acceptCharset | 服务器能够处理的字符集 |
action | 接受请求的URL |
elements | 表单中所有控件的集合 |
enctype | 请求的编码类型 |
length | 表单中控件的数量 |
name | 表单的名称 |
target | 用于发送请求和接受响应的窗口名称 |
reset() | 将所有表单重置 |
submit() | 提交表单 |
获取表单<form>对象的方法有很多种,如下:
//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var form = document.getElementById('get'); //通过ID获取到表单form标签alert(form.tagName); //打印出form标签var form2 = document.getElementsByTagName('form'); //通过标签名称获取到标签元素数组alert(form2[0].tagName); //通过数组下标,打印出form标签var form3 = document.rgj; //通过name名称直接获取元素【不推荐】alert(form3.tagName); //打印出form标签 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:最后一种方法使用name名称直接获取元素,已经不推荐使用,这是向下兼容的早期用法。问题颇多,比如有两个相同名称的,变成数组;而且这种方式以后有可能会不兼容。
forms属性,直接获取表单<form>标签,后面可以跟下标获取指定的<form>标签,也可以跟name名称来获取指定的<form>标签
使用方式:
document.forms[下标或者name名称]
//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var form = document.forms[0]; //forms属性,直接获取表单<form>标签,后面可以跟下标获取指定的<form>标签,也可以跟name名称来获取指定的<form>标签alert(form.tagName); //打印出标签名称var form2 = document.forms['rgj'];alert(form2.tagName); //打印出标签名称 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
onsubmit表单提交事件,当用户提交表单时激发函数
表单form对象.onsubmit = 执行函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch"> // <button>提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var form = document.forms[0]; //forms属性,直接获取表单<form>标签,//onsubmit表单提交事件,当用户提交表单时激发函数addEvent(form,'submit',function () {alert('提交'); //当用户提交时打印提交 }) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
form对象可以阻止默认行为,阻止后无法提交表单
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch"> // <button>提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var form = document.forms[0]; //forms属性,直接获取表单<form>标签,//onsubmit表单提交事件,当用户提交表单时激发函数addEvent(form,'submit',function (evt) {preDef(evt); //阻止form默认行为,阻止后不可以提交 }) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }//跨浏览器兼容,阻止默认行为 function preDef(evt) { //接收event对象//如果不能执行evt,说明是IE浏览器就用window.event获取event对象var e = evt || window.event;//判断W3C,阻止默认行为,如果为真if (e.preventDefault) {//就用W3C,阻止默认行为 e.preventDefault();} else {//否则就用ie的属性returnValue阻止行为e.returnValue = false;} }
submit()方法,用来自定义提交方法,也就是可以用这个方法自定义提交元素
使用方式:
form对象.submit()
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch"> // <button type="button">按钮</button> 这个是普通按钮不能提交,我们可以用submit()方法自定义成提交按钮 // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签var an = document.getElementById('an'); //通过id获取到普通按钮//给普通按钮添加一个点击事件,点击后执行匿名函数addEvent(an,'click',function () {get.submit(); //给表单添加提交方法 })});//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:在表单中尽量避免使用name="submit"或id="submit"等命名,这会和submit()方法发生冲突导致无法提交。
解决用户不停重复提交
提交数据最大的问题就是重复提交表单。因为各种原因,当一条数据提交到服务器的时候会出现延迟等长时间没反映,导致用户不停的点击提交,从而使得重复提交了很多相同的请求,或造成错误、或写入数据库多条相同信息。
有两种方法可以解决这种问题:第一种就是提交之后,立刻禁用点击按钮;第二种就是提交之后取消后续的表单提交操作。
第一种就是提交之后,立刻禁用点击按钮;只适用于按钮提交【不推荐】
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch"> // <button id="tj" type="submit">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//给form标签添加一个提交事件,提交后执行匿名函数addEvent(get,'submit',function () {//当第一个提交成功后,将提交按钮的disabled属性设置成true,禁止提交document.getElementById('tj').disabled = true;}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
第二种就是提交之后取消后续的表单提交操作。适用于各种提交,【推荐】
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch"> // <button id="tj" type="submit">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签var jil = false; //记录提交//给form标签添加一个提交事件,提交后执行匿名函数addEvent(get,'submit',function (evt) {//阻止表单默认行为,也就是阻止表单提交 preDef(evt);//如果记录等于true,表示提交过了,直接退出if (jil == true) return;jil = true; //如果没提交过,就改变记录get.submit(); //提交数据 }) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }//跨浏览器兼容,阻止默认行为 function preDef(evt) { //接收event对象//如果不能执行evt,说明是IE浏览器就用window.event获取event对象var e = evt || window.event;//判断W3C,阻止默认行为,如果为真if (e.preventDefault) {//就用W3C,阻止默认行为 e.preventDefault();} else {//否则就用ie的属性returnValue阻止行为e.returnValue = false;} }
PS:在某些浏览器,F5只能起到缓存刷新的效果,有可能获取不到真正的源头更新的数据。那么使用ctrl+F5就可以把源头给刷出来。
重置表单
用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的Web已经很少去使用了。因为用户已经填写好各种数据,不小心点了重置就会全部清空,用户体验极差。
有两种方法调用reset事件,第一个就是直接type="reset"即可;第二个就是使用fm.reset()方法调用即可。
onreset事件,表单重置事件,当用户点击重置后激发函数
使用方式:
form对象.onreset = 函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch"> // <button id="tj" type="submit">提交</button> // <button id="zhzh" type="reset">重置</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//给form标签添加一个重置事件,当点击重置后激发函数addEvent(get,'reset',function () {alert('你点击了重置');}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
reset()方法,自定义重置方法,可以用这个给表单设置一个重置
使用方式:
form对象.reset()
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch"> // <button id="tj" type="submit">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//添加一个根元素点击事件,当在页面任意地方点击后执行函数addEvent(document,'click',function () {get.reset(); //执行重置方法,重置表单 }) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
表单字段
如果想访问表单元素,可以使用之前章节讲到的DOM方法访问。但使用原生的DOM访问虽然比较通用,但不是很便利。表单处理中,我们建议使用HTML DOM,它有自己的elements属性,该属性是表单中所有元素的集合。
elements属性,获取表单form元素里的表单字段,也就是form标签里的其他属于form的标签,主要只能获取到表单字段其他元素无效,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段,如果多个字段name值相同时返回相同name值的字段集合
使用方式:
form元素.elements
form元素.elements[下标或者name值]
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch"> // <button id="tj" type="submit">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段alert(get.elements); //获取表单字段集合alert(get.elements[0]); //通过下标获取表单里的第一个元素alert(get.elements['mch']); //通过name值获取第一个元素 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
共有的表单字段属性
除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段,因此有些属性只适用于某些字段。以下罗列出共有的属性:
属性或方法 | 说明 |
disabled | 布尔值,表示当前字段是否被禁用 |
form | 指向当前字段所属表单的指针,只读 |
name | 当前字段的名称 |
readOnly | 布尔值,表示当前字段是否只读 |
tabIndex | 表示当前字段的切换 |
type | 当前字段的类型 |
value | 当前字段的值 |
重点看几个最常用的,其他使用方式相同
value属性,获取或设置当前元素的value值
使用方式:
当前元素.value
当前元素.value = 'xxxx'
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段alert(mch.value); //获取当前元素的value值mch.value = '默认值2'; //设置当前元素的value值 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
form属性,获取当前元素所属form标签
使用方式:
当前元素.form
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段alert(mch.form); //form属性,获取当前元素所属form标签 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
disabled属性,获取或者设置当前元素的,禁用当前字段
使用方式:
当前元素.disabled
当前元素.disabled = true
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段alert(mch.disabled); //disabled属性,获取或者设置当前元素的,禁用当前字段mch.disabled = true; //设置禁用当前字段 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
type属性,获取或者设置当前元素字段类型,【极不推荐】
使用方式:
当前元素.type
当前元素.type = 'xxx'
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段alert(mch.type); //type属性,获取或者设置当前元素字段类型, });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
type属性获取返回属性值如下
除了<fieldset>字段之外,所有表单字段都有type属性。对于<input>元素,这个值等于HTML属性的type值。对于非<input>元素,这个type的属性值如下:
元素说明 | HTML标签 | type属性的值 |
单选列表 | <select>...</select> | select-one |
多选列表 | <select multiple>...</select> | select-multiple |
自定义按钮 | <button>...</button> | button |
自定义非提交按钮 | <button type="button">...</button> | button |
自定义重置按钮 | <button type="reset">...</button> | reset |
自定义提交按钮 | <button type="submit">...</button> | submit |
PS:<input>和<button>元素的type属性是可以动态修改的,而<select>元素的type属性则是只读的。(在不必要的情况下,建议不修改type)。
共有的表单字段方法
每个表单字段都有两个方法:foucs()和blur()。
方法 | 说明 |
focus() | 将焦点定位到表单字段里 |
blur() | 从元素中将焦点移走 |
focus()方法,将焦点定位到表单字段里
使用方式:
当前元素.focus()
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段mch.focus(); //focus()方法,将焦点定位到表单字段里 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
blur()方法,从元素中将焦点移走
使用方式:
当前元素.blur()
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段mch.blur(); //blur()方法,从元素中将焦点移走 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
共有的表单字段事件
表单共有的字段事件有以下三种:
事件名 | 说明 |
onblur | 当字段失去焦点时触发 |
onchange | 对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发 |
onfocus | 当前字段获取焦点时触发 |
onfocus事件,当前字段获取焦点时触发
使用方式:
当前元素.onfocus = 函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段//给当前元素添加一个onfocus事件,当前字段获取焦点时触发addEvent(mch,'focus',function () {alert('获取焦点');}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
onblur事件,当字段失去焦点时触发
使用方式:
当前元素.onblur = 函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段//给当前元素添加一个事件,onblur事件,当字段失去焦点时触发addEvent(mch,'blur',function () {alert('失去焦点');}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
onchange事件,对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发
使用方式:
当前元素.onchange = 函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="默认值"> // <button id="tj" type="submit" name="mch2">提交</button> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段//给当前元素添加一个事件,onchange事件,对于<input>和<textarea>元素,在改变value并失去焦点时触发;对于<select>元素,在改变选项时触发addEvent(mch,'change',function () {alert('改变value并失去焦点');}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:关于blur和change事件的关系,并没有严格的规定。在某些浏览器中,blur事件会先于change事件发生;而在其他浏览器中,则恰好相反。
二.文本框脚本
在HTML中,有两种方式来表现文本框:一种是单行文本框<input type="text">,一种是多行文本框<textarea>。虽然<input>在字面上有value值,而<textarea>却没有,但通过都可以通过value获取他们的值。
获取单行文本框和多行文本框的value值
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段var wb = get.elements['wb']; //过name值获取到多行文本框alert(mch.value); //获取单行文本框的value值alert(wb.value); //获取多行文本框的value值 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:使用表单的value是最推荐使用的,它是HTML DOM中的属性,不建议使用标准DOM的方法。也就是说不要使用getAttribute()获取value值。原因很简单,对value属性的修改,不一定会反映在DOM中。
除了value值,还有一个属性对应的是defaultValue,可以得到原本的value值,不会因为值的改变而变化。
defaultValue属性,获取表单原本的value值,不会因为值的改变而变化。
使用方式:
当前元素.defaultValue
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段mch.value = '修改'; //修改了value值alert(mch.value); //获取到文本框的value值alert(mch.defaultValue); //defaultValue属性,获取表单原本的value值,不会因为值的改变而变化。 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
select()方法,将当前文本框里的文本选中,
使用方式:
当前元素.select()
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段mch.select(); //select()方法,将当前文本框里的文本选中, });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
选择部分文本
在使用文本框内容的时候,我们有时要直接选定部分文本,这个行为还没有标准。Firefox的解决方案是:setSelectionRange()方法。这个方法接受两个参数:索引和长度。
setSelectionRange()方法,选择文本框里指定范围的文本,这个方法接受两个参数:索引和长度。开始位置,选择几位,IE9以下不支持
使用方式:
当前对象.setSelectionRange(开始位置,选择几位)
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段//setSelectionRange()方法,选择文本框里指定范围的文本,这个方法接受两个参数:索引和长度。开始位置,选择几位mch.setSelectionRange(0,3); });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
除了IE,其他浏览器都支持这种写法(IE9+支持)
IE9以下想要选择部分文本,可以使用IE的范围操作。
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window,'load',function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段var range = mch.createTextRange(); //创建一个文本范围对象range.collapse(true); //将指针移到起点range.moveStart('character', 0); //移动起点,character表示逐字移动range.moveEnd('character', 1); //移动终点,同上range.select(); //焦点选定 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
结合上面兼容浏览器方案
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段getSelectText(mch,1,4); //执行选择文本框里指定范围的文本函数//浏览器兼容,执行选择文本框里指定范围的文本函数function getSelectText(text, start, num) { //接收3个参数,参数1元素对象。参数2开始位置,参数3获取结束位置if (text.setSelectionRange) {text.setSelectionRange(start, num);text.focus();} else if (text.createTextRange) {var range = text.createTextRange(); //创建一个文本范围对象range.collapse(true); //将指针移到起点range.moveStart('character', start); //移动起点,character表示逐字移动range.moveEnd('character', num - start); //移动终点,同上 range.select();}} });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
onselect事件,选中文本框文本后触发
使用方式:
元素对象.onselect = 函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段//onselect事件,选中文本框文本后触发addEvent(mch,'select',function () {alert('选择文本');}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
取得选择的文本
如果我们想要取得选择的那个文本,就必须使用一些手段。目前位置,没有任何规范解决这个问题。Firefox为文本框提供了两个属性:selectionStart和selectionEnd。
selectionStart属性,获取在文本框选择文本的起始位置,IE9以下不支持
selectionEnd属性,获取在文本框选择文本的结束位置,IE9以下不支持
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段//onselect事件,选中文本框文本后触发addEvent(mch,'select',function () {alert(mch.selectionStart); //selectionStart属性,获取在文本框选择文本的起始位置alert(mch.selectionEnd); //selectionEnd属性,获取在文本框选择文本的结束位置//获取到对象的value值,在用字符串截取函数,将鼠标选择的起始位置和结束位置,传入函数截取到选择的字符串alert(this.value.substring(this.selectionStart, this.selectionEnd));}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
除了IE,其他浏览器均支持这两个属性(IE9+已支持)。IE不支持,而提供了另一个方案:selection对象,属于document。这个对象保存着用户在整个文档范围内选择的文本信息。导致我们需要做浏览器兼容。
selection对象,属于document。这个对象保存着用户在整个文档范围内选择的文本信息,IE支持
createRange().text,获取范围内选择的文本信息,IE支持
取得选择的文本浏览器兼容
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <p id="p"></p> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var mch = get.elements['mch']; //通过name值获取到第一个表单字段var p = document.getElementById('p'); //通过ID获取p元素标签//onselect事件,选中文本框文本后触发addEvent(mch,'select',function (){//p元素的文本内容等于执行自定义兼容选择文本函数,将文本框元素传入函数p.innerHTML = getSelect(mch);}); });//取得选择的文本浏览器兼容 function getSelect(text) { //接收元素对象//判断浏览器如果支持selectionStart属性if (typeof text.selectionStart == 'number') { //说明不是IE//获取到对象的value值,在用字符串截取函数,将鼠标选择的起始位置和结束位置,传入函数截取到选择的字符串return text.value.substring(text.selectionStart, text.selectionEnd);} else if (document.selection) { //说明是IEreturn document.selection.createRange().text;} }//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:有一个最大的问题,就是IE在触发select事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符释放鼠标键后才触发。所以,如果使用alert()的话,导致跨浏览器的不兼容。我们没有办法让浏览器行为保持统一,但可以通过不去使用alert()来解决。
过滤输入
为了使文本框输入指定的字符,我们必须对输入进的字符进行验证。有一种做法是判断字符是否合法,这是提交后操作的。那么我们还可以在提交前限制某些字符键,
屏蔽某些字符键,让用户不能输入不合法的字符,比如屏蔽除数字键外的字符键,这样用户就只能输入数字
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var wb = get.elements['wb']; //通过name值获取到多行文本框//屏蔽非数字键的输入addEvent(wb, 'keypress', function (evt) { //给文本框添加一个键盘按键事件,当按下键盘按键时激发函数//如果不能执行evt,说明是IE浏览器就用window.event获取event对象var e = evt || window.event;var anjbm = getCharCode(e); //执行自定义夸浏览器获取按键的编码函数var anj = String.fromCharCode(anjbm); //将按键的编码转换成对应的按键字符if (!/\d/.test(anj) && e.charCode > 8){ //正则判断如果输入的不是数字,并且字符键所代表字符的ASCII编码大于8preDef(evt); //阻止默认行为,也就是不能输入,只能输入数字 }}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }//跨浏览器兼容,阻止默认行为 function preDef(evt) { //接收event对象//如果不能执行evt,说明是IE浏览器就用window.event获取event对象var e = evt || window.event;//判断W3C,阻止默认行为,如果为真if (e.preventDefault) {//就用W3C,阻止默认行为 e.preventDefault();} else {//否则就用ie的属性returnValue阻止行为e.returnValue = false;} }//夸浏览器获取按键的编码 function getCharCode(evt) { //接收event对象//如果无法直接获取event对象,说明是IE浏览器,就用IE的window.event获取event对象var e = evt || window.event;//判断event对象的charCode属性如果是数字类型if (typeof e.charCode == 'number') {//执行charCode属性return e.charCode;} else {//否则执行keyCode属性return e.keyCode;} }
if (!/\d/.test(anj) && e.charCode > 8)
PS:前半段条件判断只有数字才可以输入,导致常规按键,比如光标键、退格键、删除键等无法使用。部分浏览器比如Firfox,需要解放这些键,而非字符触发的编码均为0;在Safari3之前的浏览器,也会被阻止,而它对应的字符编码全部为8,所以最后就加上charCode > 8的判断即可。
PS:当然,这种过滤还是比较脆落的,我们还希望能够阻止裁剪、复制、粘贴和中文字符输入操作才能真正屏蔽掉这些。
剪贴板事件
如果要阻止裁剪、复制和粘贴,那么我们可以在剪贴板相关的事件上进行处理,JavaScript提供了六组剪贴板相关的事件:
事件名 | 说明 |
copy | 在发生复制操作时触发 |
cut | 在发生裁剪操作时触发 |
paste | 在发生粘贴操作时触发 |
beforecopy | 在发生复制操作前触发 |
beforecut | 在发生裁剪操作前触发 |
beforepaste | 在发生粘贴操作前触发 |
由于剪贴板没有标准,导致不同的浏览器有不同的解释。Safari、Chrome和Firefox中,凡是before前缀的事件,都需要在特定条件下触发。而IE则会在操作时之前触发带before前缀的事件。
如果我们想要禁用裁剪、复制、粘贴,那么只要阻止默认行为即可。
oncut事件,在发生剪切操作时触发
使用方式:
元素对象.oncut = 函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var wb = get.elements['wb']; //通过name值获取到多行文本框//oncut事件,在发生剪切操作时触发addEvent(wb,'cut',function () {alert('在发生剪切操作时触发');}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
阻止用户剪切行为
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var wb = get.elements['wb']; //通过name值获取到多行文本框//oncut事件,在发生剪切操作时触发addEvent(wb,'cut',function (evt) { //接收event对象preDef(evt); //阻止默认行为 }) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }//跨浏览器兼容,阻止默认行为 function preDef(evt) { //接收event对象//如果不能执行evt,说明是IE浏览器就用window.event获取event对象var e = evt || window.event;//判断W3C,阻止默认行为,如果为真if (e.preventDefault) {//就用W3C,阻止默认行为 e.preventDefault();} else {//否则就用ie的属性returnValue阻止行为e.returnValue = false;} }
oncopy事件,在发生复制操作时触发
使用方式:
元素对象.oncopy = 函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var wb = get.elements['wb']; //通过name值获取到多行文本框//oncopy事件,在发生复制操作时触发addEvent(wb,'copy',function (evt) { //接收event对象preDef(evt); //阻止默认行为,不允许复制alert('阻止了复制行为')}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }//跨浏览器兼容,阻止默认行为 function preDef(evt) { //接收event对象//如果不能执行evt,说明是IE浏览器就用window.event获取event对象var e = evt || window.event;//判断W3C,阻止默认行为,如果为真if (e.preventDefault) {//就用W3C,阻止默认行为 e.preventDefault();} else {//否则就用ie的属性returnValue阻止行为e.returnValue = false;} }
onpaste事件,在发生粘贴操作时触发
使用方式:
元素对象.onpaste = 函数
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var wb = get.elements['wb']; //通过name值获取到多行文本框//onpaste事件,在发生粘贴操作时触发addEvent(wb,'paste',function (evt) { //接收event对象preDef(evt); //阻止默认行为,不允许粘贴alert('阻止了粘贴行为');}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }//跨浏览器兼容,阻止默认行为 function preDef(evt) { //接收event对象//如果不能执行evt,说明是IE浏览器就用window.event获取event对象var e = evt || window.event;//判断W3C,阻止默认行为,如果为真if (e.preventDefault) {//就用W3C,阻止默认行为 e.preventDefault();} else {//否则就用ie的属性returnValue阻止行为e.returnValue = false;} }
当我们裁剪和复制的时候,我们可以访问剪贴板里的内容,但问题是FireFox,Opera浏览器不支持访问剪贴板。并且,不同的浏览器也有自己不同的理解。所以,这里我们就不在赘述。
文本框屏蔽中文输入法
最后一个问题影响到可能会影响输入的因素就是:输入法。我们知道,中文输入法,它的原理是在输入法面板上先存储文本,按下回车就写入英文文本,按下空格就写入中文文本。
有一种解决方案是通过CSS来禁止调出输入法:
style="ime-mode:disabled" //CSS直接编写 元素对象.style.imeMode = 'disabled'; //或在JS里设置也可以
PS:但我们也发先,Chrome浏览器却无法禁止输入法调出。所以,为了解决谷歌浏览器的问题,最好还要使用正则验证已输入的文本。
使用正则验证已输入的文本【推荐】
// <form id="get" name="rgj"> // 用户名:<input type="text" name="mch" value="单行文本框"> // <textarea name="wb">多行文本框</textarea> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var wb = get.elements['wb']; //通过name值获取到多行文本框//onkeyup:当用户释放键盘上的键触发addEvent(wb,'keyup',function (evt) { //接收event对象if(/[^\d]/g.test(wb.value)){ //正则匹配判断当用户输入非数字时alert('请输入数字!');}wb.value = wb.value.replace(/[^\d]/g, ''); //正则匹配当用户输入的是非数字时,把非数字都替换成空 }) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
自动切换焦点
为了增加表单字段的易用性,很多字段在满足一定条件时(比如长度),就会自动切换到下一个字段上继续填写。
// <form id="get" name="rgj"> // <input type="text" name="user1" maxlength="1" /> //只能写1个 // <input type="text" name="user2" maxlength="2" /> //只能写2个 // <input type="text" name="user3" maxlength="3" /> //只能写3个 // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段//给指定元素添加一个键盘事件,当按键释放时激发自定义函数addEvent(get.elements['user1'], 'keyup', tabforward);addEvent(get.elements['user2'], 'keyup', tabforward);addEvent(get.elements['user3'], 'keyup', tabforward);//自定义函数,当用户输入到指定位字符后。自动切换焦点function tabforward(evt) { //接收event对象//如果不能执行evt,说明是IE浏览器就用window.event获取event对象var e = evt || window.event;//判断元素的value长度,如果等于maxlength设置的长度if (this.value.length == this.maxLength) {//遍历所有字段for (var i = 0; i < get.elements.length; i++) {//找到当前字段if (get.elements[i] == this) {if (this.maxLength == get.elements.length) {//中途返回return;}//就把焦点移入下一个get.elements[i + 1].focus();}}}} });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
三.选择框脚本
选择框是通过<select>和<option>元素创建的,除了通用的一些属性和方法外,HTMLSelectElement类型还提供了如下的属性和方法:
HTMLSelectElement对象(<select>元素的属性)
属性/方法 | 说明 |
add(new,rel) | 插入新元素,并指定位置 |
multiple | 布尔值,是否允许多项选择 |
options | <option>元素的HTMLColletion集合 |
remove(index) | 移除给定位置的选项 |
selectedIndex | 基于0的选中项的索引,如果没有选中项,则值为-1 |
size | 选择框中可见的行数 |
在DOM中,每个<option>元素都有一个HTMLOptionElement对象,以便访问数据,这个对象有如下一些属性:
HTMLOptionElement对象(<option>元素的属性)
属性 | 说明 |
index | 当前选项在options集合中的索引 |
label | 当前选项的标签 |
selected | 布尔值,表示当前选项是否被选中 |
text | 选项的文本 |
value | 选项的值 |
options属性,获取<select>元素里的<option>标签集合
使用方式:
select元素.options
select元素.options[0] 通过下标获取到集合里指定的<option>标签
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//options属性,获取<select>元素里的<option>标签集合 alert(xz.options);alert(xz.options[0]); //通过下标获取到指定的<option>标签alert(xz.options[0].value); //获取指定<option>标签里的value值 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
type属性,获取<select>元素是多选还是单选,返回元素标签的multiple属性值
使用方式:
select元素.type
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//type属性,获取<select>元素是多选还是单选,返回元素标签的multiple属性值 alert(xz.type);//select-one //表示multiple属性值是单选 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:选择框里的type属性有可能是:select-one,也有可能是:select-multiple,这取决于HTML代码中有没有multiple属性。
获取选择框<option>标签元素的value值和文本
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//options属性,获取<select>元素里的<option>标签集合//获取选择框<option>标签元素的value值和文本alert(xz.options[0].value + xz.options[0].text); });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:操作select时,最好使用HTML DOM,因为所有浏览器兼容的很好。而如果使用标准DOM,会因为不同的浏览器导致不同的结果。
PS:当选项没有value值的时候,IE会返回空字符串,其他浏览器会返回text值。
选择选项
onchange事件,当<select>元素选择框发生改变时激发函数
使用方式:
<select>元素.onchange = 函数
selectedIndex属性,获取<select>元素当前选项的索引位置,如果是多项选择,他始终返回的是第一个项。
使用方式:
<select>元素.selectedIndex
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//onchange事件,当<select>元素选择框发生改变时激发函数addEvent(xz, 'change', function () {//selectedIndex属性,获取<select>元素当前选项的索引位置 alert(xz.selectedIndex);alert(this.options[this.selectedIndex].text); //得到当前选项的text值alert(this.options[this.selectedIndex].value); //得到当前选项的value值 }) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
selectedIndex属性还有一个用法,就是给<select>元素定位一个选项
使用方式:
<select>元素.selectedIndex = 选项索引
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//selectedIndex属性还有一个用法,就是给<select>元素定位一个选项xz.selectedIndex = 2; //将选择的第二个索引定位为默认选项 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
selected属性,判断指定的<option>标签是否是默认选项,返回布尔值,也可以通过selected = true 设置option当前元素为默认选项
使用方式:
option元素.selected
option元素.selected = true
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签var sy = xz.options[2]; //获取第二个<option>元素//selected属性,判断指定的<option>标签是否是默认选项,返回布尔值,也可以通过selected = true 设置option当前元素为默认选项alert(sy.selected); //查看当前<option>标签是否是默认选项,返回布尔值sy.selected = true; //设置当前<option>标签为默认选项 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
而selected和selectedIndex在用途上最大的区别是,selected是返回的布尔值,所以一般用于判断上;而selectedIndex是数值,一般用于设置和获取。
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//给<select>标签添加一个事件,当选项改变时激发函数addEvent(xz, 'change', function () {//判断第3个选项被选中时if (this.options[2].selected == true) {alert('是默认选项!');}}); });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
添加选项
如需动态的添加选项我们有两种方案:DOM和Option构造函数。
DOM方式添加选项
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签var option = document.createElement('option'); //创建一个元素节点var text = document.createTextNode('北京t'); //创建一个文本节点option.appendChild(text); //将文本添加到新创建的元素节点中option.setAttribute('value', '北京v'); //设置元素的属性值xz.appendChild(option); //将新创建的元素节点添加到<select>标签的子元素末尾 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
使用Option构造函数添加选项
Option()构造函数,构造一个<option>标签元素节点,IE9以下不支持,IE9以下Option()函数构造的<option>标签元素节点,不支持appendChild()添加,【不推荐appendChild()添加】
使用方式:
变量 = new Option('text值','value值');
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//Option()构造函数,构造一个<option>标签元素节点var option = new Option('t', '北京v');//将构造的<option>标签元素节点,添加到<select>标签的子元素末尾xz.appendChild(option); //IE出现bug });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
add()方法,用来添加Option()函数构造的<option>标签元素节点到<select>标签里,第一个参数Option()函数构造变量,参数二要添加的索引位置【推荐】IE9以下也支持
使用方式:
<select>标签.add(Option()函数构造变量,要添加的索引位置)
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//Option()构造函数,构造一个<option>标签元素节点var option = new Option('自贡t', '自贡v');//add()方法,用来添加Option()函数构造的<option>标签元素节点到<select>标签里xz.add(option,0); //0,表示添加到第一位 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:在DOM规定,add()中两个参数是必须的,如果不确定索引,那么第二个参数设置null即可,即默认移入最后一个选项。但这是IE中规定第二个参数是可选的,所以设置null表示放入不存在的位置,导致失踪,为了兼容性,我们传递undefined即可兼容。
xz.add(option, null); //IE不显示了 xz.add(option, undefined); //兼容了
移除选项
有三种方式可以移除某一个选项:DOM移除、remove()方法移除和null移除。
remove()方法,移除<select>标签里指定的<option>选项,参数<option>选项的索引位置【推荐】
使用方式:
select标签.remove(<option>选项的索引位置)
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到<select>标签//removeChild删除节点里指定的子节点,获取<select>标签里的指定options传入方法//xz.removeChild(xz.options[0]); //DOM移除//remove()方法,移除<select>标签里指定的<option>选项,参数<option>选项的索引位置【推荐】xz.remove(3); //remove()移除,推荐//获取到<option>选项设置为null//xz.options[0] = null; //null移除 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
PS:当第一项移除后,下面的项,往上顶,所以不停的移除第一项,即可全部移除。
移动选项
如果有两个选择框,把第一个选择框里的第一项移到第二个选择框里,并且第一个选择框里的第一项被移除。
// <form id="get" name="rgj"> // <select name="xz" size="5"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option value="昆明v">昆明t</option> // </select> // <select name="xz2" size="5"> // <option>无</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到第一个<select>标签var xz2 = get.elements['xz2']; //通过name值获取到第二个<select>标签//给第一个<select>标签添加一个点击事件,点击后激发函数addEvent(xz,'click',function () {//xz.selectedIndex获取到第一个<select>标签的当前选项的索引//xz.options[]通过索引获取到当前选项,将当前选项添加到第二个<select>标签里 xz2.appendChild(xz.options[xz.selectedIndex]);}) });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
排列选项
选择框提供了一个index属性,可以得到当前选项的索引值,和selectedIndex的区别是,一个是选择框对象的调用,一个是选项对象的调用。
index属性,获取<option>标签当前元素的索引
使用方式
option元素.index
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option value="昆明v">昆明t</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到第一个<select>标签alert(xz.options[1].index);//返回1 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
排序选项
// <form id="get" name="rgj"> // <select name="xz"> // <option value="上海v">上海t</option> // <option value="杭州v">杭州t</option> // <option value="南京v">南京t</option> // <option value="昆明v">昆明t</option> // </select> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var xz = get.elements['xz']; //通过name值获取到第一个<select>标签var option = xz.options[1]; //获取第二个option标签选项//insertBefore将一个节点添加到,指定节点的前面。第一个参数是要添加的节点,第二个参数是要在它之前添加节点的目标节点//将第二个节点移动添加到,第一个节点前xz.insertBefore(option, xz.options[option.index - 1]); });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
单选按钮和复选框
checked属性,判断指定单选框或复选框是否被选中,返回布尔值
使用方式
指定单选框或复选框元素.checked
// <form id="get" name="rgj"> // 音乐:<input type="checkbox" name="yse" value="5"> // 体育:<input type="checkbox" name="yse" value="6"> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var checkbox = get.elements['yse']; //通过name值获取到所有的单选框alert(checkbox[0].checked); //判断指定点选框是否被选中,返回布尔值//循环所有单选框,打印出被选中表单的value值//根据所有单选框的长度循环次数for (var i = 0; i < checkbox.length; i++) { //循环单选按钮//判断每次循环到的单选框checked属性等于true,就表示此单选框被选中if (checkbox[i].checked == true) { //遍历每一个找出选中的那个//打印出被选中的单选框的value值alert(checkbox[i].value); //得到值 }} });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
defaultChecked属性,判断指定单选框或复选框是否是被默认选中,它获取的是原本HTML的默认选中checked属性值,而不会因为点击而改变。
使用方式:
指定单选框或复选框元素.defaultChecked
// <form id="get" name="rgj"> // 音乐:<input type="checkbox" name="yse" value="5"> // 体育:<input type="checkbox" name="yse" value="6"> // </form>//添加事件当页面加载完成后激发函数 addEvent(window, 'load', function () {var get = document.getElementById('get'); //通过ID获取到form标签//elements属性,获取表单form元素里的表单字段,返回表单字段集合,后面可以跟字段下标,获取指定字段,也可以跟name值获取指定字段var checkbox = get.elements['yse']; //通过name值获取到所有的单选框alert(checkbox[0].defaultChecked); //判断单选框是否为默认选择 });//跨浏览器添加事件,添加事件兼容 function addEvent(obj, type, fn) { //添加事件函数,接收3个参数,1事件对象,2事件名称,3事件函数//判断浏览器如果支持w3cif (obj.addEventListener) {//就用w3c的addEventListener方法添加对象,将事件名称和事件函数传入添加事件obj.addEventListener(type, fn, false);} else if (obj.attachEvent) { //判断如果浏览器是IE9以下,就用IE的方法attachEvent添加事件//将事件名称和事件函数传入创建对象obj.attachEvent('on' + type, fn);} }
更多推荐
第一百二十二节,JavaScript表单处理
发布评论