JavaScript高级程序设计第四版学习--第十九章

---

title: JavaScript高级程序设计第四版学习–第十九章
date: 2021-5-28 22:46:03
author: Xilong88
tags: JavaScript

本章内容
理解表单基础
文本框验证与交互
使用其他表单控件
可能出现的面试题：
1.讲讲form的常用属性方法
2.怎么阻止表单提交？
3.表单按钮有哪几种？
4.如何获取焦点（H5中新方法）
5.H5对表单有哪些增强？
6.如何检测表单合法性？
7.了解过validity对象吗？

总结：这一章讲了表单的属性和方法。

知识点：

1.<form> 元素，在JavaScript中以HTMLFormElement 类型表示，有以下属性和方法：

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 属性。

可以通过

let form = document.getElementById("form1");

获取表单对象，也可以通过，form集合

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

2.提交表单
type 属性为"submit" 的<input> 或<button> 元素来定义，图片按钮可以使用type 属性为"image" 的<input> 元素来定义。

<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图片按钮 -->
<input type="image" src="graphic.gif">

如果表单中有上述任何一个按钮，且焦点在表单中某个控件上，则按回
车键也可以提交表单

点击会执行submit事件，可以用来检查表单。

preventDefault() 方法可以阻止表单提交

也可以调用submit() 方法来执行表单提交，但是这个方法不会触发submit事件

3.重置表单

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

如果字段原来是空的，就会变成空的；
如果字段有默认值，则恢复为默认值。

也可以取消这个事件

let form = document.getElementById("myForm");
form.addEventListener("reset", (event) => {
  event.preventDefault();
});

也有类似的reset() 方法在js中调用，同样不会触发reset事件

4.表单字段

from里的<input> 、<textarea> 、<button> 、<select> 和<fieldset> 元素都在elements 集合里面

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

假如通过name，可以获取到多个同名的元素

<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>

let form = document.getElementById("myForm");
let colorFields = form.elements["color"];
console.log(colorFields.length);  // 3
let firstColorField = colorFields[0];
let firstFormField = form.elements[0];
console.log(firstColorField === firstFormField);   // true

表单内的元素的公共属性：

disabled ：布尔值，表示表单字段是否禁用。
form ：指针，指向表单字段所属的表单。这个属性是只读
的。
name ：字符串，这个字段的名字。
readOnly ：布尔值，表示这个字段是否只读。
tabIndex ：数值，表示这个字段在按Tab键时的切换顺序。
type ：字符串，表示字段类型，如"checkbox" 、"radio"
等。
value ：要提交给服务器的字段值。对文件输入字段来说，这
个属性是只读的，仅包含计算机上某个文件的路径。

除了form 属性以外，JavaScript可以动态修改任何属性。

let form = document.getElementById("myForm");
let field = form.elements[0];
// 修改字段的值
field.value = "Another value";
// 检查字段所属的表单
console.log(field.form === form);   // true
// 给字段设置焦点
field.focus();
// 禁用字段
field.disabled = true;
// 改变字段的类型（不推荐，但对<input>来说是可能的）
field.type = "checkbox";

可以通过设置disable来防止用户多次点击提交：

// 避免多次提交表单的代码
let form = document.getElementById("myForm");
form.addEventListener("submit", (event) => {
  let target = event.target;
  // 取得提交按钮
  let btn = target.elements["submit-btn"];
  // 禁用提交按钮
  btn.disabled = true;
});

不同浏览器触发事件的时机不一样。有些浏览器会在触发表单的submit 事件前先触发提交
按钮的click 事件，有些浏览器则会后触发click 事件。

<input> 元素的type取值

5.公共方法
focus() 和blur()
focus获取焦点，blur失去焦点
如果表单中第一个字段是type 为"hidden" 的<input> 元素，或者该字段被CSS属性display 或visibility 隐藏了，以上代码就会出错。

HTML5为表单字段增加了autofocus 属性，支持的浏览器会自动为带有该属性的元素设置焦点，而无须使用JavaScript。

<input type="text" autofocus>

可以自动获取焦点

默认情况下只能给表单元素设置焦点。不过，通过将tabIndex 属性设置为–1再调用focus() ，也可以给任意元素设置焦点。

6.公共事件

blur ：在字段失去焦点时触发。
change ：在<input> 和<textarea> 元素的value 发生变化
且失去焦点时触发，或者在<select> 元素中选中项发生变化
时触发。
focus ：在字段获得焦点时触发。

7.文本框编程

选择文本
select()

let textbox = document.forms[0].elements["textbox1"];
textbox.select();

取得选中文本
selectionStart 和selectionEnd

function getSelectedText(textbox){
  return textbox.value.substring(textbox.selectionStart,
                                 textbox.selectionEnd);
}

部分选中文本

textbox.value = "Hello world!"
// 选择所有文本
textbox.setSelectionRange(0, textbox.value.length);  // "Hello world!"
// 选择前3个字符
textbox.setSelectionRange(0, 3);   // "Hel"
// 选择第4~6个字符
textbox.setSelectionRange(4, 7);   // "o w"

输入过滤

charCode 属性

textbox.addEventListener("keypress", (event) => {
  if (!/\d/.test(String.fromCharCode(event.charCode))){
    event.preventDefault();
  }
});

8.处理剪贴板

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

通过beforecopy 、beforecut 和beforepaste 事件可以在向剪贴板发送或从中检索数据前修改数据。不过，取消这些事件并不会取消剪贴板操作。要阻止实际的剪贴板操作，必须取消copy 、cut和paste 事件。

clipboardData 对象

clipboardData 对象上有3个方法：getData() 、setData() 和clearData()

自动切换：输入最大长度字符串后自动换到下一个输入区块。

<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">

<script>
  function tabForward(event){
    let target = event.target;
    if (target.value.length == target.maxLength){
      let form = target.form;
      for (let 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;
        }
      }
    }
  }
  let inputIds = ["txtTel1", "txtTel2", "txtTel3"];
  for (let id of inputIds) {
    let textbox = document.getElementById(id);
    textbox.addEventListener("keyup", tabForward);
  }
  let textbox1 = document.getElementById("txtTel1");
  let textbox2 = document.getElementById("txtTel2");
  let textbox3 = document.getElementById("txtTel3");
</script>

9.HTML5约束验证API

required 属性

<input type="text" name="username" required>

更多输入类型

<input type="email" name="email">
<input type="url" name="homepage">

数值范围

HTML5还定义了其他几种新的输入元素类型，它们都是期待某种数值输入的，包括：“number”、“range” 、“datetime” 、“datetime-local” 、“date”、“month” 、“week” 和"time" 。

input.stepUp();      // 加1
input.stepUp(5);     // 加5
input.stepDown();    // 减1
input.stepDown(10);  // 减10

输入模式

pattern 属性

可以根据pattern 属性来规定输入字符串的模式

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

检测有效性

checkValidity()可以检测合法与否，返回布尔值

if (document.forms[0].elements[0].checkValidity()){
  // 字段有效，继续
} else {
  // 字段无效
}

validity对象的属性

customError ：如果设置了setCustomValidity() 就返回
true ，否则返回false 。
patternMismatch ：如果字段值不匹配指定的pattern 属性
则返回true 。
rangeOverflow ：如果字段值大于max 的值则返回true 。
rangeUnderflow ：如果字段值小于min 的值则返回true 。
stepMisMatch ：如果字段值与min 、max 和step 的值不相符
则返回true 。
tooLong ：如果字段值的长度超过了maxlength 属性指定的
值则返回true 。某些浏览器，如Firefox 4会自动限制字符数
量，因此这个属性值始终为false 。
typeMismatch ：如果字段值不是"email" 或"url" 要求的格
式则返回true 。
valid ：如果其他所有属性的值都为false 则返回true 。
与checkValidity() 的条件一致。
valueMissing ：如果字段是必填的但没有值则返回true 。

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

禁用验证

<form method="post" action="/signup" novalidate>
    <!-- 表单元素 -->
</form>

可以禁止对表单进行任何验证

formnovalidate可以禁用验证，直接提交表单

<form method="post" action="/foo">
    <!-- 表单元素 -->
    <input type="submit" value="Regular Submit">
    <input type="submit" formnovalidate name="btnNoValidate"
           value="Non-validating Submit">
</form>

10.选择框编程
<select> 和<option>
表单选择对象的属性和方法：

add(newOption, relOption) ：在relOption 之前向控件中添加
新的<option> 。
multiple ：布尔值，表示是否允许多选，等价于HTML的
multiple 属性。
options ：控件中所有<option> 元素的HTMLCollection 。
remove(index) ：移除给定位置的选项。
selectedIndex ：选中项基于0的索引值，如果没有选中项则为–
1。对于允许多选的列表，始终是第一个选项的索引。
size ：选择框中可见的行数，等价于HTML的size 属性。

value的取值：
如果没有选中项，则选择框的值是空字符串。
如果有一个选中项，且其value 属性有值，则选择框的值就是选中
项value 属性的值。即使value 属性的值是空字符串也是如此。
如果有一个选中项，且其value 属性没有指定值，则选择框的值是
该项的文本内容。
如果有多个选中项，则选择框的值根据前两条规则取得第一个选中
项的值。

每个 元素在DOM中都由一个HTMLOptionElement 对象表示。HTMLOptionElement 类型为方便数据存取添加了以下属性。

index ：选项在options 集合中的索引。
label ：选项的标签，等价于HTML的label 属性。
selected ：布尔值，表示是否选中了当前选项。把这个属性设置
为true 会选中当前选项。
text ：选项的文本。
value ：选项的值（等价于HTML的value 属性）。

let selectbox = document.forms[0].elements["location"];
// 不推荐
let text = selectbox.options[0].firstChild.nodeValue;     // 选项文本
let value = selectbox.options[0].getAttribute("value");   // 选项值

let selectbox = document.forms[0].elements["location"];
// 推荐
let text = selectbox.options[0].text;     // 选项文本
let value = selectbox.options[0].value;   // 选项值

因为不同dom的支持不一样，但是js对象是一样的。

选项处理

let selectedOption = selectbox.options[selectbox.selectedIndex];

可以获取单选的备选项

选项还可以通过取得选项的引用并将其selected 属性设置为true 来选中。例如，以下代码会选中选择框中的第一项：

selectbox.options[0].selected = true;

通过selected 属性可以确定选择框中哪个选项被选中。要取得所有选中项，需要循环选项集合逐一检测selected 属性

function getSelectedOptions(selectbox){
  let result = new Array();
  for (let option of selectbox.options) {
    if (option.selected) {
      result.push(option);
    }
  }
  return result;
}

添加选项

let newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

另一种添加新选项的方式是使用选择框的add() 方法。
接收两个参数：要添加的新选项和要添加到其前面的参考选项

比如添加末尾：

let newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined);    // 最佳方案

移除选项

selectbox.removeChild(selectbox.options[0]);   // 移除第一项

selectbox.remove(0);   // 移除第一项

要清除选择框的所有选项，需要迭代所有选项并逐一移除它们，如下面例子所示：

function clearSelectbox(selectbox) {
  for (let option of selectbox.options) {
    selectbox.remove(0);

  }
}

移动和重排选项

insertBefore()
前移一位：

let optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,
                       selectbox.options[optionToMove.index-1]);

后移一位：

let optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove,
                       selectbox.options[optionToMove.index+2]);

表单序列化 略
富文本编辑 略