表单控件的全面分析

1.提交表单


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

 

用户单击重置按钮重置表单时,会触发reset事件。 利用这个机会,我们可以在必要时取消重置操作。 共有的表单字段属性除了<fieldset>元素之外,所有表单字段都拥有相同的一组属性。 由于<input>类型可以表示多种表单字段,因此有些属性只适用于某些字段,但还有一些属性是所有字段所共有的。 表单字段共有的属性和方法如下。

  1. disabled:布尔值,表示当前字段是否被禁用。
  2. form:指向当前字段所属表单的指针;只读。
  3. name:当前字段的名称。
  4. readOnly:布尔值,表示当前字段是否只读。
  5. tabIndex:表示当前字段的切换( tab) 序号。
  6. type:当前字段的类型,如“checkbox”、 “radio”,等等。
  7. value:当前字段将被提交给服务器的值。 对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径。


除了form属性之外,可以通过JavaScript动态修改其他任何属性。  能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作表单。

 

例如,很多用户可能会重复单击表单的提交按钮。 在涉及信用卡消费时,这就是个问题:因为会导致费用翻番。 为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。 只要侦听submit事件,并在该事件发生时禁用提交按钮即可。 

 

2. 共有的表单字段方法

 

每个表单字段都有两个方法:focus()和blur()。 其中,focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件。 例如,接收到焦点的文本框会显示插入符号,随时可以接收输入。 使用focus()方法,可以将用户的注意力吸引到页面中的某个部位。

 

例如,在页面加载完毕后,将焦点转移到表单中的第一个字段。 为此,可以侦听页面的load事件,并在该事件发生时在表单的第一个字段上调用focus()方法与focus()方法相对的是blur()方法,它的作用是从元素中移走焦点。 在调用blur()方法时,并不会把焦点转移到某个特定的元素上;仅仅是将焦点从调用这个方法的元素上面移走而已。 在早期Web开发中,那时候的表单字段还没有readonly特性,因此就可以使用blur()方法来创建只读字段。 现在,虽然需要使用blur()的场合不多了,但必要时还可以使用的。 

 

3. 共有的表单字段事件


除了支持鼠标、 键盘、 更改和HTML事件之外,所有表单字段都支持下列3个事件。

 

  1. blur:当前字段失去焦点时触发。
  2. change:对于<input>和<textarea>元素,在它们失去焦点且value值改变时触发对于<select>元素,在其选项改变时触发。 
  3. focus:当前字段获得焦点时触发。

 

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

 

4.文本框脚本


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

posted @ 2017-04-26 17:51  前端精髓  阅读(617)  评论(0编辑  收藏  举报
在这里插入图片描述