表单控件的全面分析

Posted 2020-09-14 前端精髓

提交表单
用户单击提交按钮或图像按钮时，就会提交表单。 使用<input>或<button>都可以定
义提交按钮，只要将其type特性的值设置为“submit”即可，而图像按钮则是通过
将<input>的type特性值设置为“image”来定义的。 因此，只要我们单击以下代码生
成的按钮，就可以提交表单。

用户单击重置按钮重置表单时，会触发reset事件。 利用这个机会，我们可以在必
要时取消重置操作。

共有的表单字段属性
除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。 由于<input>类型
可以表示多种表单字段，因此有些属性只适用于某些字段，但还有一些属性是所有
字段所共有的。 表单字段共有的属性和方法如下。
disabled：布尔值，表示当前字段是否被禁用。
form：指向当前字段所属表单的指针；只读。
name：当前字段的名称。
readOnly：布尔值，表示当前字段是否只读。
tabIndex：表示当前字段的切换（ tab） 序号。
type：当前字段的类型，如“checkbox”、 “radio”，等等。
value：当前字段将被提交给服务器的值。 对文件字段来说，这个属性是只读
的，包含着文件在计算机中的路径。
除了form属性之外，可以通过javascript动态修改其他任何属性。 

能够动态修改表单字段属性，意味着我们可以在任何时候，以任何方式来动态操作
表单。 例如，很多用户可能会重复单击表单的提交按钮。 在涉及信用卡消费时，这
就是个问题：因为会导致费用翻番。 为此，最常见的解决方案，就是在第一次单击
后就禁用提交按钮。 只要侦听submit事件，并在该事件发生时禁用提交按钮即可。

2. 共有的表单字段方法
每个表单字段都有两个方法：focus()和blur()。 其中，focus()方法用于将浏览器
的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。 例如，接收到
焦点的文本框会显示插入符号，随时可以接收输入。 使用focus()方法，可以将用
户的注意力吸引到页面中的某个部位。 例如，在页面加载完毕后，将焦点转移到表
单中的第一个字段。 为此，可以侦听页面的load事件，并在该事件发生时在表单的
第一个字段上调用focus()方法

与focus()方法相对的是blur()方法，它的作用是从元素中移走焦点。 在调用blur()
方法时，并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的
元素上面移走而已。 在早期Web开发中，那时候的表单字段还没有readonly特性，
因此就可以使用blur()方法来创建只读字段。 现在，虽然需要使用blur()的场合不
多了，但必要时还可以使用的。

3. 共有的表单字段事件
除了支持鼠标、 键盘、 更改和html事件之外，所有表单字段都支持下列3个事件。
blur：当前字段失去焦点时触发。
change：对于<input>和<textarea>元素，在它们失去焦点且value值改变时触

发；对于<select>元素，在其选项改变时触发。
focus：当前字段获得焦点时触发。

当用户改变了当前字段的焦点，或者我们调用了blur()或focus()方法时，都可以触
发blur和focus事件。 这两个事件在所有表单字段中都是相同的。 但是，change事件
在不同表单控件中触发的次数会有所不同。 对于<input>和<textarea>元素，当它们
从获得焦点到失去焦点且value值改变时，才会触发change事件。 对于<select>元
素，只要用户选择了不同的选项，就会触发change事件；换句话说，不失去焦点也
会触发change事件。

14.2 文本框脚本
在HTML中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另
一种是使用<textarea>的多行文本框。 这两个控件非常相似，而且多数时候的行为
也差不多。 不过，它们之间仍然存在一些重要的区别。
要表现文本框，必须将<input>元素的type特性设置为“text”。 而通过设置size特
性，可以指定文本框中能够显示的字符数。 通过value特性，可以设置文本框的初
始值，而maxlength特性则用于指定文本框可以接受的最大字符数。