JavaScript高级程序设计 第4版 --表单脚本

表单脚本

1、基础

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

获取form元素

let form = document.getElementById("form1"); //id
// 取得页面中的第一个表单
let firstForm = document.forms[0];
// 取得名字为"form2"的表单
let myForm = document.forms["form2"]; 
1
2
3
4
5

2、提交表单

表单是通过用户点击提交按钮或图片按钮的方式提交的

如果表单中有上述任何一个按钮，且焦点在表单中某个控件上，则按回车键也可以提交表单。（textarea 除外），这样就提供了验证表单数据的机会

 
<input type="submit" value="提交"> 
 
<button type="submit">提交button> 
 
<input type="image" src="graphic.gif"> 
  
event.preventDefault(); 
  
let form = document.getElementById("myForm"); 
// 提交表单
form.submit();
1
2
3
4
5
6
7
8
9
10
11
12

3、重置表单

重置按钮可以使用 type 属性为"reset"的或 元素来创建

 
<input type="reset" value="重置"> 
 
<button type="reset">重置button> 
1
2
3
4

4、表单字段

可以像页面中的其他元素一样使用原生DOM方法来访问

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

表单字段的公共属性

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

js可动态修改任何属性

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

// 避免多次提交表单的代码
let form = document.getElementById("myForm"); 
form.addEventListener("submit", (event) => { 
 let target = event.target; 
 // 取得提交按钮
 let btn = target.elements["submit-btn"]; 
 // 禁用提交按钮
 btn.disabled = true; 
}); 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

表单字段的公共方法

focus()、 blur()

h5：autofocus（）

表单字段的公共事件

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

5、文本框编程

单行使用<input>元素，多行使用<textarea>元素
1

<input type="text" size="25" maxlength="50" value="文本">
<textarea rows="25" cols="5">initial valuetextarea>
1
2

选择文本

1、select()：全部选中文本框中的文本

let textbox = document.forms[0].elements["textbox1"]; 
textbox.select();
 // 一获取焦点就自动选中所有文本
textbox.addEventListener("focus", (event) => { 
 event.target.select(); 
});
1
2
3
4
5
6

2、select事件

let textbox = document.forms[0].elements["textbox1"]; 
textbox.addEventListener("select", (event) => { 
console.log(`文本内容: ${textbox.value}`); 
}); 
1
2
3
4

3、部分选中文本

setSelectionRange（第一个字符索引，最后一个字符索引）

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" 
1
2
3
4
5
6
7

6、输入过滤

1、屏蔽字符

//屏蔽所有
textbox.addEventListener("keypress", (event) => { 
 event.preventDefault(); 
}); 
//只允许输入数字
textbox.addEventListener("keypress", (event) => { 
 if (!/\d/.test(String.fromCharCode(event.charCode))){ 
 event.preventDefault(); 
 }
1
2
3
4
5
6
7
8
9

2、处理剪贴板

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

3、自动切换

在当前字段完成时自动切换到下一个字段

// 当用户输入长度与maxlength属性的值一样时，切换到下一个字段输入框
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");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

7、HTML5约束验证API

1、必填字段（required）

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

2、输入类型(email，url)

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

3、数值范围（“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week” 和"time"）

<input type="number" min="0" max="100" step="5" name="count">
1

4、输入模式（pattern：正则表达式）

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

5、检测有效性

字段是否有效：checkValidity()

//整个表单是否符合字段约束条件
if(document.forms[0].checkValidity()){ 
 // 表单有效，继续
} else { 
 // 表单无效
} 
1
2
3
4
5
6

字段为什么有效或无效：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("请输入值) 
 } else if (input.validity.typeMismatch){ 
 console.log("Please enter an email address."); 
 } else { 
 console.log("Value is invalid."); 
 } 
}
1
2
3
4
5
6
7
8
9

6、禁用验证 （novalidate）

//禁止对表单做任何验证
<form method="post" action="/signup" novalidate> 
  
form>
1
2
3
4

8、选择框编程

选择框时使用和元素时创建的

•  add(newOption, relOption)：在 relOption 之前向控件中添加新的。
•  multiple：布尔值，表示是否允许多选，等价于 HTML 的 multiple 属性。
•  options：控件中所有元素的 HTMLCollection。
•  remove(index)：移除给定位置的选项。
•  selectedIndex：选中项基于 0 的索引值，如果没有选中项则为–1。对于允许多选的列表，始 终是第一个选项的索引。
•  size：选择框中可见的行数，等价于 HTML 的 size 属性。 选择框的 type 属性可能是"select-one"或"select-multiple"，具体取决于 multiple 属性 是否存在。当前选中项根据以下规则决定选择框的 value 属性。
•  如果没有选中项，则选择框的值是空字符串。
•  如果有一个选中项，且其 value 属性有值，则选择框的值就是选中项 value 属性的值。即使 value 属性的值是空字符串也是如此。
•  如果有一个选中项，且其 value 属性没有指定值，则选择框的值是该项的文本内容。
•  如果有多个选中项，则选择框的值根据前两条规则取得第一个选中项的值。

<select name="location" id="selLocation"> 
    // 若选中该项，值为Sunnyvale, CA
 <option value="Sunnyvale, CA">Sunnyvaleoption> 
    // 若选中该项，值为""
 <option value="">Chinaoption> 
     // 若选中该项，值为"Australia"
 <option>Australiaoption> 
select>
1
2
3
4
5
6
7
8

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

9、富文本编辑

1、 designMode

<!--为iframe源 1.html>

DOCTYPE html> 
<html> 
 <head> 
 <title>Blank Page for Rich Text Editingtitle> 
 head> 
 <body> 
 body> 
html>


DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <iframe src="./1.html"  name="richedit" style="height: 100px; width: 100px">iframe>
body>
<script>
    window.addEventListener("load", () => {
        frames["richedit"].document.designMode = "on";
    }); 
script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2、使用 contenteditable

  <div class="editable" id="richedit" contenteditable style="height: 300px; width: 300px;border: 1px solid #000;">div>
1

3、与富文本交互

document.execCommand() 可接收三个参数：要执行的命令、浏览器是否为命令提供用户界面的布尔值（为浏览器兼容，应始为false）、执行命令必需的值

下图为很简单的一个富文本编辑器

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

4、富文本选择（getSelection()）

•  anchorNode：选区开始的节点。
•  anchorOffset：在 anchorNode 中，从开头到选区开始跳过的字符数。
•  focusNode：选区结束的节点。
•  focusOffset：focusNode 中包含在选区内的字符数。
•  isCollapsed：布尔值，表示选区起点和终点是否在同一个地方。
•  rangeCount：选区中包含的 DOM 范围数量。 Selection 的属性并没有包含很多有用的信息。好在它的以下方法提供了更多信息，并允许操作 选区。
•  addRange(range)：把给定的 DOM 范围添加到选区。
•  collapse(node, offset)：将选区折叠到给定节点中给定的文本偏移处。
•  collapseToEnd()：将选区折叠到终点。
•  collapseToStart()：将选区折叠到起点。
•  containsNode(node)：确定给定节点是否包含在选区中。
•  deleteFromDocument()：从文档中删除选区文本。与执行 execCommand(“delete”, false, null)命令结果相同。
•  extend(node, offset)：通过将 focusNode 和 focusOffset 移动到指定值来扩展选区。
•  getRangeAt(index)：返回选区中指定索引处的 DOM 范围。
•  removeAllRanges()：从选区中移除所有 DOM 范围。这实际上会移除选区，因为选区中至少 要包含一个范围。
•  removeRange(range)：从选区中移除指定的 DOM 范围。
•  selectAllChildren(node)：清除选区并选择给定节点的所有子节点。
•  toString()：返回选区中的文本内容。

let selection = frames["richedit"].getSelection(); 
// 取得选中的文本
let selectedText = selection.toString(); 
// 取得表示选区的范围
let range = selection.getRangeAt(0); 
// 高亮选中的文本
let span = frames["richedit"].document.createElement("span"); 
span.style.backgroundColor = "yellow"; 
range.surroundContents(span);
1
2
3
4
5
6
7
8
9

5、通过表单提交富文本

//frames
form.addEventListener("submit", (event) => { 
 let target = event.target; 
 target.elements["comments"].value = 
 frames["richedit"].document.body.innerHTML; 
});
// contenteditable
orm.addEventListener("submit", (event) => { 
 let target = event.target; 
 target.elements["comments"].value = 
 document.getElementById("richedit").innerHTML; 
}); 

1
2
3
4
5
6
7
8
9
10
11
12
13