JavaScript红皮书学习(14)--表单脚本

Posted by liveipool on January 13, 2017

表单脚本

14.0.png

14.1 表单的基础知识

14.1.png

var firstForm = document.forms[0];    //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名叫"form2"的表单

14.1.1 提交表单

14.1.1.png

有一个问题在于,用户可能因为多次点击而重复提交表单,这种时候可以通过第一次提交表单后就禁用提交按钮,或者利用onsubmit事件处理程序取消后续的表单提交操作.

14.1.2 重置表单

14.1.2.png

14.1.3 表单字段

14.1.31.png
14.1.32.png

如果有多个表单控件都在使用一个name(如单选按钮), 那么就会返回以该name命名的一个NodeList.
通常,在访问form中的元素时,尽量都使用elements.

1.共有的表单字段属性:
14.1.33.png

2.共有的表单字段方法:
每个表单字段都有两个方法:focus()和blur().它们是自解释的.(注意这里说的是方法)
14.1.34.png

3.共有的表单字段事件:(注意这里是事件)
14.1.35.png

14.2 文本框脚本

14.2.png

14.2.1 选择文本

上述两种文本框都支持select()方法,这个方法用于选择文本框中的所有文本.如

var textBox = document.forms[0].elements["textBox"];
textBox.select();

select()方法对应了select事件,可通过selectionStart和selectionEnd属性来取得选择的文本,如:

function getSelectText(textBox) {
	return textBox.value.substring(textBox.selectionStart, textBox.selectionEnd);
}

还有选择部分文本如setSelectionRange()方法等.

14.2.2 过滤输入

我们经常会要求用户在文本框中输入特定的数据,或者输入特定格式的数据.由于文本框在默认情况下没有提供多少验证数据的手段,因此必须使用JavaScript来完成此类过滤输入的操作.这里就不详讲,以后在项目中,具体情况具体分析,综合运用事件和DOM手段来实现如屏蔽字符或操作剪贴板等.

14.2.3 自动切换焦点

使用JavaScript可以从多个方面增强表单字段的易用性.其中,最常见的一种方式就是在用户填写完当前字段时,自动将焦点切换到下一字段.这种功能通常是配合着文本框的maxlength特性来实现.

14.2.4 HTML5约束验证API

为了在将表单提交到服务器之前验证数据,HTML5新增了一些功能:
14.2.41.png
14.2.42.png
14.2.43.png
14.2.44.png
14.2.45.png
14.2.46.png
14.2.47.png
14.2.48.png

14.3 选择框脚本

选择框是通过< select >和< option >元素创建的.暂时还没怎么用过,用的时候再查API吧.

14.4 表单序列化

14.4.png

14.5 小结

虽然HTML和Web应用自诞生以来已经发生了天翻地覆的变化,但Web表单相对却没有什么改变.使用JavaScript可以增强已有的表单字段,从而创造出新的功能,或者提升表单的易用性.

相关文章链接