表单脚本

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

2、提交表单

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

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

 
 
 
提交 
 
  
event.preventDefault();  
let form = document.getElementById("myForm"); 
// 提交表单
form.submit();

3、重置表单

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

 
 
 
重置 

4、表单字段

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

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

表单字段的公共属性

•  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; 
}); 

表单字段的公共方法

focus()、 blur()

h5：autofocus（）

表单字段的公共事件

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

5、文本框编程

单行使用元素，多行使用元素
</code></pre> 
</blockquote> 
<pre><code class="prism language-html"><input type="text" size="25" maxlength="50" value="文本">
<textarea rows="25" cols="5">initial value

选择文本

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

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

2、select事件

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

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" 

6、输入过滤

1、屏蔽字符

//屏蔽所有
textbox.addEventListener("keypress", (event) => { event.preventDefault(); 
}); 
//只允许输入数字
textbox.addEventListener("keypress", (event) => { if (!/\d/.test(String.fromCharCode(event.charCode))){ event.preventDefault(); }

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

7、HTML5约束验证API

1、必填字段（required）

2、输入类型(email，url)

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

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

5、检测有效性

字段是否有效：checkValidity()

//整个表单是否符合字段约束条件
if(document.forms[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("请输入值) } else if (input.validity.typeMismatch){ console.log("Please enter an email address."); } else { console.log("Value is invalid."); } 
}

6、禁用验证 （novalidate）

//禁止对表单做任何验证
  

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 属性没有指定值，则选择框的值是该项的文本内容。
•  如果有多个选中项，则选择框的值根据前两条规则取得第一个选中项的值。

 // 若选中该项，值为Sunnyvale, CASunnyvale // 若选中该项，值为""China // 若选中该项，值为"Australia"Australia 

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

9、富文本编辑

1、 designMode

2、使用 contenteditable

3、与富文本交互

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

命令	值	说明
backcolor	颜色字符串	设置文档背景颜色
bold	null	切换选中文本的粗体样式
copy	null	将选中文本复制到剪贴板
createlink	URL字符串	将当前选中文本转换为指向给定url的链接
cut	null	将选中文本剪切到剪贴板
delete	null	删除当前选中的文本
fontname	字体名	将选中文本改为使用指定字体
fontsize	1-7	将选中文本改为指定字体大小
forecolor	颜色字符串	将选中文本改为指定颜色
formatblock	HTML 标签，如h1	将选中文本包含在指定的 HTML 标签中
ndent	null	缩进文本
inserthorizontalrule	null	在光标位置插入hr元素
insertimage	图片URL	在光标位置插入图片
insertorderedlist	null	在光标位置插入ol元素
insertparagraph	null	在光标位置插入p元素
insertunorderedlist	null	在光标位置插入ul元素
italic	null	切换选中文本的斜体样式
justifycenter	null	在光标位置居中文本块
justifyleft	null	在光标位置左对齐文本块
outdent	null	减少缩进
paste	null	在选中文本上粘贴剪贴板内容
removeformat	null	移除包含光标所在位置块的 HTML 标签。这是 formatblock 的 反操作
selectall	null	选中文档中所有文本
underline	null	切换选中文本的下划线样式
unlink	null	移除文本链接。这是 createlink 的反操作

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

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

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; 
});