JavaScript高级程序设计（第3版）学习笔记 第14章

第14章 表单脚本

1.在 JavaScript 中，表单对应的是 HTMLForm- Element 类型，有自己下列独有的属性和方法：

• acceptCharset:服务器能够处理的字符集;等价于 HTML 中的 accept-charset 特性。
• action:接受请求的 URL;等价于 HTML 中的 action 特性。
• elements:表单中所有控件的集合(HTMLCollection)。
• enctype:请求的编码类型;等价于 HTML 中的 enctype 特性。
• length:表单中控件的数量。
• method:要发送的 HTTP 请求类型，通常是"get"或"post";等价于 HTML 的 method 特性。
• name:表单的名称;等价于 HTML 的 name 特性。
• reset():将所有表单域重置为默认值。
• submit():提交表单。
• target:用于发送请求和接收响应的窗口名称;等价于 HTML 的 target 特性。

• 通过 document.forms 可以取得页面中所有的表单

2.提交表单：

• 将<input>或<button>的 type 特性值设置为"submit"定义提交按钮。
• 将<input>的 type 特性值设置为 "image"定义提交图像按钮。
• 调用 submit()方法，不会触发 submit 事件，要记得在调用此方法之 前先验证表单数据。
  解决重复提交表单的问题：在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。

3.重置表单：

• 将<input>或<button>的 type 特性值设置为"reset"定义重置按钮。
• 调用 reset()方法，触发 reset 事件。

4.每个表单都有elements 属性，是表单中所有表单元素(字段)的集合，是一个有序列表， 包含着表单中的所有字段，例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在 elements 集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和 name 特性来访问它们。

var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

5.如果有多个表单控件都在使用一个 name(如单选按钮)，那么就会返回以该 name 命名的一个 NodeList。

6.表单字段共有的属性：除了 form 属性之外，可以通过 JavaScript 动态修改其他任何属性。

• disabled：布尔值，表示当前字段是否被禁用。
• form：指向当前字段所属表单的指针;只读。
• name：当前字段的名称。
• readOnly：布尔值，表示当前字段是否只读。
• tabIndex：表示当前字段的切换(tab)序号。
• type：当前字段的类型，如"checkbox"、"radio"，等等。
• value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。
  除了<fieldset>之外，所有表单字段都有 type 属性。对于<input>元素，这个值等于 HTML 特 性 type 的值，<input>和<button>元素的 type 属性是可以动态修改的，而<select>元素的 type 属性 则是只读的。

共有的表单字段方法：

• focus()：用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。（HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript 就能自动把焦点移动到相应字段。）
• blur()方法：从元素中移走焦点。

共有的表单字段事件：

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

7.文本框脚本
（1）在 HTML 中，有两种方式来表现文本框:一种是使用<input>元素的单行文本框，另一种是使用 <textarea>的多行文本框。

• <input>元素：将<input>元素的 type 特性设置为"text"，设置 size 特性，可以指定文本框中能够显示的字符数。设置 value 特性，可以设置文本框的初始值，设置maxlength 特性可以指定文本框可以接受的最大字符数。
• <textarea>元素：始终会呈现为一个多行文本框，使用 rows 特性指定文本框的字符行数，使用 cols 特性指定文本框的字符列数，初始值必须要放在<textarea>和</textarea>之间。

（2）跨浏览器编程选择文本

//接收三个参数:要操作的文本框、要选择文本中第一个字符的索引和要选 择文本中最后一个字符之后的索引。
function selectText(textbox, startIndex, stopIndex){
    if (textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange){
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    textbox.focus();
}

(3)过滤输入

//可以屏蔽非数值字符，但不屏蔽那些也会 触发 keypress 事件的基本按键。
EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);

    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 &&
                 !event.ctrlKey){
        EventUtil.preventDefault(event);
    }
});

(4)操作剪贴板,6 个剪贴板事件:

• beforecopy：在发生复制操作前触发。
• copy：在发生复制操作时触发。
• beforecut：在发生剪切操作前触发。
• cut：在发生剪切操作时触发。
• beforepaste：在发生粘贴操作前触发。
• paste：在发生粘贴操作时触发。

使用 clipboardData 对象访问剪贴板中的数据了，确保跨浏览器兼容性，最好只 在发生剪贴板事件期间使用这个对象。

var EventUtil = { 
    //省略的代码

    //跨浏览器从剪贴板中取得数据
    getClipboardText: function(event){
        var clipboardData = (event.clipboardData || window.clipboardData); 
        return clipboardData.getData("text");
    },
    //跨浏览器将文本放到剪贴板中
    setClipboardText: function(event, value){
        if (event.clipboardData){
            return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData){
            return window.clipboardData.setData("text", value);
        } 
    },
    
    //省略的代码 
};

（5）自动切换焦点

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

//在前一个文本框中的字符达到最大数量后，自动将焦点切换到下一个文本框。
(function(){
    function tabForward(event){
        event = EventUtil.getEvent(event);
        var target = EventUtil.getTarget(event); 
        if (target.value.length == target.maxLength){
            var form = target.form;
            for (var i=0, len=form.elements.length; i < len; i++) {
                if (form.elements[i] == target) {
                    if (form.elements[i+1]){
                        form.elements[i+1].focus();
                    }
                    return; 
                }
            } 
        }
    }
    var textbox1 = document.getElementById("txtTel1");
    var textbox2 = document.getElementById("txtTel2");
    var textbox3 = document.getElementById("txtTel3");

    EventUtil.addHandler(textbox1, "keyup", tabForward);
    EventUtil.addHandler(textbox2, "keyup", tabForward);
    EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

（6）HTML5 约束验证API

• 必填字段：在表单字段中指定了 required 属性。任何标注有 required 的字段，在提交表单时都不能空着。这个属性适用于<input>、<textarea> 和<select>字段
• "email"类型：要求输入的文本必须符合电子邮件地址的模式。
• "url"类型：要求输入的 文本必须符合 URL 的模式。
• "number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"以及"time"元素要求必须填写某种基于数字的值。
• pattern属性：一个正则表达式，用于匹配文本框中的值。

• <input type="text" pattern="\d+" name="count">

• 使用 checkValidity()方法可以检测表单中的某个字段是否有效。
• validity：告诉你为什么字段有效或无效，包含一系列属性，每个属性会返回一个布尔值：

1. ustomError :如果设置了 setCustomValidity()，则为 true，否则返回 false。
2. patternMismatch:如果值与指定的 pattern 属性不匹配，返回 true。
3. rangeOverflow:如果值比 max 值大，返回 true。
4. rangeUnderflow:如果值比 min 值小，返回 true。
5. stepMisMatch:如果 min 和 max 之间的步长值不合理，返回 true。
6. tooLong:如果值的长度超过了 maxlength 属性指定的长度，返回 true。有的浏览器(如 Firefox 4)会自动约束字符数量，因此这个值可能永远都返回 false。
7. typeMismatch:如果值不是"mail"或"url"要求的格式，返回 true。
8. valid:如果这里的其他属性都是 false，返回 true。checkValidity()也要求相同的值。
9. valueMissing:如果标注为 required 的字段中没有值，返回 true。

•  if (input.validity && !input.validity.valid){
      if (input.validity.valueMissing){
          alert("Please specify a value.")
      } else if (input.validity.typeMismatch){
          alert("Please enter an email address.");
      } else {
          alert("Value is invalid.");
      }
  }
  

（7）禁用验证，通过设置 novalidate 属性，可以告诉表单不进行验证。

<form method="post" action="signup.php" novalidate> 
    <!--这里插入表单元素-->
</form>

8. 选择框是通过<select>和<option>元素创建的。

（1）HTMLSelectElement 类型还提供了下列属性和方法：

• add(newOption, relOption):向控件中插入新<option>元素，其位置在相关项(relOption) 之前。
• multiple:布尔值，表示是否允许多项选择;等价于 HTML 中的 multiple 特性。
• options:控件中所有<option>元素的 HTMLCollection。
• remove(index):移除给定位置的选项。
• selectedIndex:基于 0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
• size:选择框中可见的行数;等价于 HTML 中的 size 特性。
• value：由当前选中项决定，相应规则如下：

1. 如果没有选中的项，则选择框的 value 属性保存空字符串。
2. 如果有一个选中项，而且该项的 value 特性已经在 HTML 中指定，则选择框的 value 属性等于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。
3. 如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该项的文本。
4. 如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。

HTMLOptionElement 对象添加了下列属性:

• index:当前选项在 options 集合中的索引。
• label:当前选项的标签;等价于 HTML 中的 label 特性。
• selected:布尔值，表示当前选项是否被选中。将这个属性设置为 true 可以选中当前选项。
• text:选项的文本。
• value:选项的值(等价于 HTML 中的 value 特性)。

（2）用 JavaScript 动态创建选项，并将它们添加到选择框中。

// 第一种：DOM 方法
var newOption = document.createElement("option"); 
newOption.appendChild(document.createTextNode("Option text")); 
newOption.setAttribute("value", "Option value");

selectbox.appendChild(newOption);

//第二种：使用 Option 构造函数来创建新选项
var newOption = new Option("Option text", "Option value"); 
selectbox.appendChild(newOption); //在 IE8 及之前版本中有问题

//第三种：使用选择框的 add()方法
var newOption = new Option("Option text", "Option value"); 
selectbox.add(newOption, undefined); //最佳方案

（3）移除选项的方式

//第一种：可以使用 DOM 的 removeChild()方法
selectbox.removeChild(selectbox.options[0]); //移除第一个选项

//第二种：使用选择框的 remove()方法
selectbox.remove(0); //移除第一个选项

//第三种：将相应选项设置为 null
selectbox.options[0] = null;

9.表单序列化，浏览器发送给服务器数据的方式：

• 对表单字段的名称和值进行 URL 编码，使用和号(&)分隔。
• 不发送禁用的表单字段。
• 只发送勾选的复选框和单选按钮。
• 不发送 type 为"reset"和"button"的按钮。
• 多选选择框中的每个选中的值单独一个条目。
• 在单击提交按钮提交表单的情况下，也会发送提交按钮;否则，不发送提交按钮。也包括 type为"image"的<input>元素。<select>元素的值，就是选中的<option>元素的 value 特性的值。如果<option>元素没有value 特性，则是<option>元素的文本值。