首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 开发语言 > 编程 >

其次十七章:表单处理

2013-12-11 
第二十七章:表单处理学习要点:1.表单介绍2.文本框脚本3.选择框脚本为了分担服务器处理表单的压力,JavaScri

第二十七章:表单处理

学习要点:
1.表单介绍
2.文本框脚本
3.选择框脚本

为了分担服务器处理表单的压力,JavaScript 提供了一些解决方案,从而大大打破了处处依赖服务器的局面。
一.表单介绍
在 HTML 中,表单是由<form>元素来表示的,而在 JavaScript 中,表单对应的则是HTMLFormElement 类型。 HTMLFormElement 继承了 HTMLElement, 因此它拥有 HTML 元素具有的默认属性,并且还独有自己的属性和方法:
HTMLFormElement 属性和方法
其次十七章:表单处理
?

获取表单<form>对象的方法有很多种,如下:

document.getElementById('myForm'); //使用 ID 获取<form>元素document.getElementsByTagName('form')[0]; //使用获取第一个元素方式获取document.forms[0]; //使用 forms 的数字下标获取元素document.forms['yourForm']; //使用 forms 的名称下标获取元素document.yourForm; //使用 name 名称直接获取元素

?
PS:最后一种方法使用 name 名称直接获取元素,已经不推荐使用,这是向下兼容的早期用法。 问题颇多, 比如有两个相同名称的, 变成数组; 而且这种方式以后有可能会不兼容。
提交表单
通过事件对象,可以阻止 submit 的默认行为,submit 事件的默认行为就是携带数据跳转到指定页面。

addEvent(fm, 'submit', function (evt) {preDef(evt);});

?
我们可以可以使用 submit()方法来自定义触发 submit 事件, 也就是说, 并不一定非要点击 submit 按钮才能提交。

if (e.ctrlKey && e.keyCode == 13) fm.submit(); //判断按住了 ctrl 和 enter 键触发

?
PS:在表单中尽量避免使用 name="submit"或 id="submit"等命名,这会和 submit()方法
发生冲突导致无法提交。
提交数据最大的问题就是重复提交表单。 因为各种原因, 当一条数据提交到服务器的时候会出现延迟等长时间没反映, 导致用户不停的点击提交, 从而使得重复提交了很多相同的请求,或造成错误、或写入数据库多条相同信息。

addEvent(fm, 'submit', function (evt) { //模拟延迟preDef(evt);setTimeout(function () {fm.submit();}, 3000);});

?
有两种方法可以解决这种问题: 第一种就是提交之后, 立刻禁用点击按钮; 第二种就是提交之后取消后续的表单提交操作。

document.getElementById('sub').disabled = true; //将按钮禁用var flag = false //设置一个监听变量if (flag == true) return //如果存在返回退出事件flag = true; //否则确定是第一次,设置为 true

?
PS:在某些浏览器,F5 只能起到缓存刷新的效果,有可能获取不到真正的源头更新的数据。那么使用 ctrl+F5 就可以把源头给刷出来。
重置表单
用户点击重置按钮时,表单会被初始化。虽然这个按钮还得以保留,但目前的 Web 已经很少去使用了。 因为用户已经填写好各种数据, 不小心点了重置就会全部清空, 用户体验极差。
有两种方法调用 reset 事件, 第一个就是直接 type="reset"即可; 第二个就是使用 fm.reset()
方法调用即可。

<input type="reset" value="重置" /> //不需要 JS 代码即可实现addEvent(document,'click', function () {fm.reset(); //使用 JS 方法实现重置});addEvent(fm,'reset', function () { //获取重置按钮//});

?
表单字段
如果想访问表单元素,可以使用之前章节讲到的 DOM 方法访问。但使用原生的 DOM访问虽然比较通用,但不是很便利。表单处理中,我们建议使用 HTML DOM,它有自己的elements 属性,该属性是表单中所有元素的集合。

fm.elements[0]; //获取第一个表单字段元素fm.elements['user']; //获取 name 是 user 的表单字段元素fm.elements.length; //获取所有表单字段的数量

?
如果多个表单字段都使用同一个 name,那么就会返回该 name 的 NodeList 表单列表。

fm.elements['sex']; //获取相同 name 表单字段列表

?
PS: 我们是通过 fm.elements[0]来获取第一个表单字段的, 但也可以使用 fm[0]直接访问第一个字段。因为 fm[0]访问方式是为了向下兼容的,所以,我们建议大家使用 elements 属性来获取。
共有的表单字段属性
除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段,因此有些属性只适用于某些字段。以下罗列出共有的属性:


其次十七章:表单处理
?
这些属性其实就是 HTML 表单里的属性,在 XHTML 课程中已经详细讲解过,这里不一个个赘述,重点看几个最常用的。

fm.elements[0].value; //获取和设置 valuefm.elements[0].form == fm; //查看当前字段所属表单fm.elements[0].disabled = true; //禁用当前字段fm.elements[0].type = 'checkbox'; //修改字段类型,极不推荐

?
除了<fieldset>字段之外,所有表单字段都有 type 属性。对于<input>元素,这个值等于HTML 属性的 type 值。对于非<input>元素,这个 type 的属性值如下:


其次十七章:表单处理
?
PS: <input>和<button>元素的 type 属性是可以动态修改的, 而<select>元素的 type 属性则是只读的。(在不必要的情况下,建议不修改 type)。
共有的表单字段方法
每个表单字段都有两个方法:foucs()和 blur()。
其次十七章:表单处理
?

fm.elements[0].focus(); //将焦点移入fm.elements[0].blur(); //将焦点移出

?
共有的表单字段事件
表单共有的字段事件有以下三种:
其次十七章:表单处理
?
?

addEvent(textField, 'focus', function () { //缓存 blur 和 change 再测试一下alert('Lee');});

?
PS:关于 blur 和 change 事件的关系,并没有严格的规定。在某些浏览器中,blur 事件会先于 change 事件发生;而在其他浏览器中,则恰好相反。
二.文本框脚本
在 HTML 中,有两种方式来表现文本框:一种是单行文本框<input type="text">,一种是多行文本框<textarea>。虽然<input>在字面上有 value 值,而<textarea>却没有,但通过都可以通过 value 获取他们的值。

var textField = fm.elements[0];var areaField = fm.elements[1];alert(textField.value + ',' + areaField.value); //得到 value 值

?
PS:使用表单的 value 是最推荐使用的,它是 HTML DOM 中的属性,不建议使用标准DOM 的方法。也就是说不要使用 getAttribute()获取 value 值。原因很简单,对 value 属性的修改,不一定会反映在 DOM 中。
除了 value 值,还有一个属性对应的是 defaultValue,可以得到原本的 value 值,不会因为值的改变而变化。

alert(textField.defaultValue); //得到最初的 value 值

?
选择文本
使用 select()方法,可以将文本框里的文本选中,并且将焦点设置到文本框中。

textField.select(); //选中文本框中的文本

?
选择部分文本
在使用文本框内容的时候, 我们有时要直接选定部分文本, 这个行为还没有标准。 Firefox的解决方案是:setSelectionRange()方法。这个方法接受两个参数:索引和长度。

textField.setSelectionRange(0,1); //选择第一个字符textField.focus(); //焦点移入textField.setSelectionRange(0, textField.value.length); //选择全部textField.focus(); //焦点移入

?
除了 IE,其他浏览器都支持这种写法(IE9+支持),那么 IE 想要选择部分文本,可以使用 IE 的范围操作。

var range = textField.createTextRange(); //创建一个文本范围对象range.collapse(true); //将指针移到起点range.moveStart('character', 0); //移动起点,character 表示逐字移动range.moveEnd('character', 1); //移动终点,同上range.select(); //焦点选定

?
PS:关于 IE 范围的详细讲解,我们将在今后的课程中继续讨论。并且 W3C 也有自己的范围。
//选择部分文本实现跨浏览器兼容

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', stop - start); //IE 用终点减去起点得到字符数range.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));});

?
除了 IE,其他浏览器均支持这两个属性(IE9+已支持) 。IE 不支持,而提供了另一个方案: selection 对象, 属于 document。 这个对象保存着用户在整个文档范围内选择的文本信息。
导致我们需要做浏览器兼容。

function getSelectText(text) {if (typeof text.selectionStart == 'number') { //非 IEreturn text.value.substring(text.selectionStart, text.selectionEnd);} else if (document.selection) { //IEreturn document.selection.createRange().text; //获取 IE 选择的文本}}

?
PS:有一个最大的问题,就是 IE 在触发 select 事件的时候,在选择一个字符后立即触发,而其他浏览器是选择想要的字符释放鼠标键后才触发。所以,如果使用 alert()的话, 导致跨浏览器的不兼容。我们没有办法让浏览器行为保持统一,但可以通过不去使用 alert()来解决。

addEvent(textField, 'select', function () {//alert(getSelectText(this)); //导致用户行为结果不一致document.getElementById('box').innerHTML = getSelectText(this);});

?
过滤输入
为了使文本框输入指定的字符, 我们必须对输入进的字符进行验证。 有一种做法是判断字符是否合法,这是提交后操作的。那么我们还可以在提交前限制某些字符,还过滤输入。

addEvent(areaField, 'keypress', function (evt) {var e = evt || window.event;var charCode = getCharCode(evt); //得到字符编码if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 8) { //条件阻止默认preDef(evt);}});

?
PS:前半段条件判断只有数字才可以输入,导致常规按键,比如光标键、退格键、删除键等无法使用。部分浏览器比如 Firfox,需要解放这些键,而非字符触发的编码均为 0;
在 Safari3 之前的浏览器,也会被阻止,而它对应的字符编码全部为 8,所以最后就加上charCode > 8 的判断即可。
PS:当然,这种过滤还是比较脆落的,我们还希望能够阻止裁剪、复制、粘贴和中文字符输入操作才能真正屏蔽掉这些。
如果要阻止裁剪、复制和粘贴,那么我们可以在剪贴板相关的事件上进行处理,JavaScript 提供了六组剪贴板相关的事件:


其次十七章:表单处理
?
由于剪贴板没有标准,导致不同的浏览器有不同的解释。Safari、Chrome 和 Firefox 中,凡是 before 前缀的事件,都需要在特定条件下触发。而 IE 则会在操作时之前触发带 before
前缀的事件。
如果我们想要禁用裁剪、复制、粘贴,那么只要阻止默认行为即可。

addEvent(areaField, 'cut', function (evt) { //阻止裁剪preDef(evt);});addEvent(areaField, 'copy', function (evt) { //阻止复制preDef(evt);});addEvent(areaField, 'paste', function (evt) { //阻止粘贴preDef(evt);});

?
当我们裁剪和复制的时候,我们可以访问剪贴板里的内容,但问题是 FireFox,Opera浏览器不支持访问剪贴板。 并且, 不同的浏览器也有自己不同的理解。 所以, 这里我们就不在赘述。
最后一个问题影响到可能会影响输入的因素就是:输入法。我们知道,中文输入法, 它的原理是在输入法面板上先存储文本, 按下回车就写入英文文本, 按下空格就写入中文文本。
有一种解决方案是通过 CSS 来禁止调出输入法:

style="ime-mode:disabled" //CSS 直接编写areaField.style.imeMode = 'disabled'; //或在 JS 里设置也可以

?
PS:但我们也发先,Chrome 浏览器却无法禁止输入法调出。所以,为了解决谷歌浏览器的问题,最好还要使用正则验证已输入的文本。

addEvent(areaField, 'keyup', function (evt) { //keyup 弹起的时候this.value = this.value.replace(/[^\d]/g, ''); //把非数字都替换成空});

?
自动切换焦点
为了增加表单字段的易用性,很多字段在满足一定条件时(比如长度),就会自动切换到下一个字段上继续填写。

<input type="text" name="user1" maxlength="1" /> //只能写 1 个<input type="text" name="user2" maxlength="2" /> //只能写 2 个<input type="text" name="user3" maxlength="3" /> //只能写 3 个function tabForward (evt) {var e = evt || window.event;var target = getTarget(evt);//判断当前长度是否和指定长度一致if (target.value.length == target.maxLength) {//遍历所有字段for (var i =0; i < fm.elements.length; i ++) {//找到当前字段if (fm.elements[i] == target) {//就把焦点移入下一个fm.elements[i + 1].focus();//中途返回return;}}}}

?
三.选择框脚本
选择框是通过<select>和<option>元素创建的,除了通用的一些属性和方法外,HTMLSelectElement 类型还提供了如下的属性和方法:
HTMLSelectElement 对象


其次十七章:表单处理
其次十七章:表单处理
?
在 DOM 中,每个<option>元素都有一个 HTMLOptionElement 对象,以便访问数据, 这个对象有如下一些属性:
HTMLOptionElement 对象
其次十七章:表单处理
?

var city = fm.elements['city']; //HTMLSelectElementalert(city.options); //HTMLOptionsCollectionalert(city.options[0]); //HTMLOptionElementalert(city.type); //select-one

?
PS:选择框里的 type 属性有可能是:select-one,也有可能是:select-multiple,这取决于 HTML 代码中有没有 multiple 属性。

alert(city.options[0].firstChild.nodeValue); //上海 t,获取 text 值,不推荐的做法alert(city.options[0].getAttribute('value')); //上海 v,获取 value 值,不推荐的做法alert(city.options[0].text); //上海 t,获取 text 值,推荐alert(city.options[0].value); //上海 v,获取 value 值,推荐

?
PS:操作 select 时,最好使用 HTML DOM,因为所有浏览器兼容的很好。而如果使用标准 DOM,会因为不同的浏览器导致不同的结果。
PS:当选项没有 value 值的时候,IE 会返回空字符串,其他浏览器会返回 text 值。
选择选项
对于只能选择一项的选择框,使用 selectedIndex 属性最为简单。

addEvent(city, 'change', function () {alert(this.selectedIndex); //得到当前选项的索引,从 0 开始alert(this.options[this.selectedIndex].text); //得到当前选项的 text 值alert(this.options[this.selectedIndex].value); //得到当前选项的 value 值});

?
PS:如果是多项选择,他始终返回的是第一个项。
city.selectedIndex = 1; //设置 selectedIndex 可以定位某个索引
通过 option 的属性(布尔值),也可以设置某个索引,设置为 true 即可。
city.options[0].selected = true; //设置第一个索引
而 selected 和 selectedIndex 在用途上最大的区别是,selected 是返回的布尔值,所以一般用于判断上;而 selectedIndex 是数值,一般用于设置和获取。

addEvent(city, 'change', function () {if (this.options[2].selected == true) { //判断第三个选项是否被选定alert('选择正确!');}});

?
添加选项
如需动态的添加选项我们有两种方案:DOM 和 Option 构造函数。

var option = document.createElement('option');option.appendChild(document.createTextNode('北京 t'));option.setAttribute('value', '北京 v')city.appendChild(option);

?
使用 Option 构造函数创建:

var option = new Option('北京 t', '北京 v');city.appendChild(option); //IE 出现 bug

?
使用 add()方法来添加选项:

var option = new Option('北京 t', '北京 v');city.add(option, 0); //0,表示添加到第一位

?
PS:在 DOM 规定,add()中两个参数是必须的,如果不确定索引,那么第二个参数设置 null 即可,即默认移入最后一个选项。但这是 IE 中规定第二个参数是可选的,所以设置null 表示放入不存在的位置,导致失踪,为了兼容性,我们传递 undefined 即可兼容。

city.add(option, null); //IE 不显示了city.add(option, undefined); //兼容了

?
移除选项
有三种方式可以移除某一个选项:DOM 移除、remove()方法移除和 null 移除。

city.removeChild(city.options[0]); //DOM 移除city.remove(0); //remove()移除,推荐city.options[0] = null; //null 移除

?
PS:当第一项移除后,下面的项,往上顶,所以不停的移除第一项,即可全部移除。
移动选项
如果有两个选择框, 把第一个选择框里的第一项移到第二个选择框里, 并且第一个选择
框里的第一项被移除。

var city = fm.elements['city']; //第一个选择框var info = fm.elements['info']; //第二个选择框info.appendChild(city.options[0]); //移动,被自我删除

?
排列选项
选择框提供了一个 index 属性, 可以得到当前选项的索引值, 和 selectedIndex 的区别是,一个是选择框对象的调用,一个是选项对象的调用。

var option1 = city.options[1];city.insertBefore(option1, city.options[option1.index - 1]); //往下移动移位

?
单选按钮
通过 checked 属性来获取单选按钮的值。

for (var i = 0; i < fm.sex.length; i ++) { //循环单选按钮if (fm.sex[i].checked == true) { //遍历每一个找出选中的那个alert(fm.sex[i].value); //得到值}}

?
PS:除了 checked 属性之外,单选按钮还有一个 defaultChecked 按钮,它获取的是原本的 checked 按钮对象,而不会因为 checked 的改变而改变。

if (fm.sex[i].defaultChecked == true) {alert(fm.sex[i].value);}

?
复选按钮
通过 checked 属性来获取复选按钮的值。复选按钮也具有 defaultChecked 属性。

var love = '';for (var i = 0; i < fm.love.length; i ++) {if (fm.love[i].checked == true) {love += fm.love[i].value;}}alert(love);

?

热点排行