Javascript高级编程学习笔记（75）—— 表单（3）表单字段

时间：2023-02-21 16:22:20

表单字段

表单作为web应用中不可或缺的一部分，当然也是可以使用原生的 DOM 元素来访问的

除了标准的访问方式之外，每个表单都拥有一个 elements 属性，该属性保存着该表单所有 表单元素 的集合，该集合是一个有序列表，包含着所有的表单字段

这些元素在该集合中出现的顺序，与在文档中出现的顺序一致

在该集合中可以使用 name 和 在文档中的顺序 来对其中的元素进行索引

若有多个表单元素拥有相同的 Name，那么将会返回一个 nodelist 集合

以下方的HTML代码片段为例：

<form method = "post" id="myForm">

    <ul>

        <li><input type = "radio" name = "color" value = "red">Red</li>

        <li><input type = "radio" name = "color" value = "green">Green</li>

        <li><input type = "radio" name = "color" value = "blue">Blue</li>

    </ul>

</form>

在上面这个简单的表单中，有三个单选按钮，他们的name都是“color”，如果我们访问  elements["color"]  将会返回一个 nodelist，包含上边代码中的 三个 input 元素

不过如果访问 elements[0] 将只会返回第一个 input 元素

共有的表单字段属性

除了<fieldset>元素之外，所有的表单字段都拥有一组公共相同的属性

由于 <input> 类型可以表示多种表单字段，因此有些属性只适用于部分表单字段，但仍有一些属性是所有字段所共有的

表单字段共有的属性如下：

  1. disabled：布尔值 表示当前的字段是否被禁用
  2. form：指向当前字段的所有表单属性
  3. name：当前字段的名称
  4. readOnly：布尔值，表示当前字段是否只读
  5. tabIndex：表示当前字段的切换（tab）序号
  6. type：当前字段的类型
  7. value：当前字段提交给服务器的值

以上属性中只有 form 是无法修改的

其它字段都可以通过 JavaScript 动态修改

对于上面属性中的 type 属性：

  • input 的 type 属性和其HTML特性的值一致
  • select 的值为 “select-one”
  • <select multiple> 的值为 "select-multiple"
  • button 的 type 属性和其HTML特性的值一致

例如上一篇文章提到的当用户提交请求后就禁用按钮，这一功能则可以通过以下代码实现：

var form = document.getElementById("myForm");// 获取表单元素

form.addEventlistener("submit",function(event){

    var btn = event.target;// 获取触发提交事件的按钮

    btn.disabled = true;// 禁用该按钮

},true)

需要注意的是：不要使用 click 事件来禁用按钮，因为不同的浏览器之间存在时差，即无法确定click事件禁用按钮时数据是否被发往服务器

共有的表单字段方法

所有的表单字段都拥有两个方法： focus（） 和   blur（）

其中 focus 方法用于将浏览器的焦点设置到表单字段，用以激活表单字段，使其可以响应表键盘事件

其中focus的主要用途有两种

  1. 用于当文档加载完成后将用户的注意力吸引到表单的特定位置
  2. 用于用户输入信息校验，即只有当用户的输入达到要求时才能改变焦点进行其它操作

对于第一种应用场景，我们只需要在文档的 load 事件完成之后，对我们希望的元素调用 focus 方法即可

而对于第二种应用场景也十分的简单，只需要在当我们校验检测不通过时又将焦点设置回原来的元素即可

此外，对于第一种应用场景 HTML5 提供了 autofous 特性用于实现这一效果：

<input type="text" autofocus>

在支持该特性的浏览器中当文档加载完成，焦点就会设置为上面的 input 元素

blur方法的作用与 focus 方法相反，将焦点从当前元素移除，但并不移动到某个特定元素

这个方法早期用于创建只读字段，即当触发获取焦点事件就调用 blur 方法将焦点移出该元素

共有的表单字段事件

除了支持基本的 鼠标、键盘、变动、HTML事件之外，所有的表单字段都支持以下三个事件：

  1. blur：当前字段失去焦点时触发
  2. change：对于 input、textarea 元素，当其失去焦点且value值被改变时触发，对于select元素改变选项时触发
  3. focus：当前字段获得焦点时触发

通常使用上述事件来改变用户界面，或者向用户给出视觉提示

其中change事件则常常用于验证用户输入

需要注意的地方在于：blur事件和change事件的关系并没有严格的规定，在某些浏览器中blur事件会先于change事件发生，而有些则恰恰相反

相关文章