js 表单脚本

属性和方法：

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

引用的3种方式：

let form = document.getElementById("form1");
let firstForm = document.forms[0];    // 获取页面第一个表单
let myForm = document.forms["form2"];    // 取得名字为 “form2” 的表单

提交表单

使用type 属性为“submit” 的 、 或图片。这种方式提交表单会在向服务器发送请求之间触发submit 事件。

let form = document.getElementById('myForm');
 
form.addEventListener("submit", (event) => {
    // 阻止表单提交
    event.preventDefault();
    // 验证结果
});
 
// js方式提交表单
form.submit();

重置表单

type 属性为“reset”

表单字段

所有表单元素都是表单element 属性中包含的一个值，按出现次序保存。如果多个表单控件使用了同一个name，使用name获取元素，则会返回NodeList。

let form = document.getElementById("form1");
let field1 = form.elements[0];
let field2 = form.elements["textbox1"];
let fieldCount = form.elements.length;

1. 表单字段的公共属性

• disabled：布尔值，表示表单字段是否禁用
• form：指针，指向表单字段所属的表单。只读
• name：字符串，字段名字
• readOnly：布尔值，是否只读
• tabIndex：数值，表示这个字段在按Tab键时的切换顺序
• type：字符串，字段类型。
• value：要提交给服务器的字段值。

这里面除了form属性之外，都可以动态修改。

2. 表单字段的公共方法

• focus() 设置焦点，如果给设置了hidden 的input 元素使用会出错。设置autofocus属性，浏览器会自动为其设置焦点
• blur() 移出焦点

3. 表单字段的公共事件

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

文本框编程

两种文本框方法：input 和textarea。

input ：size 属性指定文本框的宽度，value 属性指定文本框的初始值，maxLength 属性指定文本框允许的最多字符数。

textarea：rows 属性指定文本框的高度，cols 属性指定以字符数计量的文本框宽度。与input 不同的是，初始值要包含在这个标签之间，不能指定最大允许的字符数

选择文本

select 方法 用于全部选中文本框中的文字。target.select()

1. select 事件

当选中文本框中的文本时，会触发。

2. 取得选中文本

分别表示文本选中的起点和终点

• selectionStart
• selectionEnd

3. 部分选中文本

element.setSelectionRange(selectionStart, selectionEnd [, selectionDirection])

参数：开始位置，结束位置，选择方向的字符串（forward、backward、none）

输入过滤

1. 屏蔽字符

例如：只允许输入数字

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

2. 处理剪贴板

相关事件：

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

event对象上有clipboardData 对象来获取剪贴板数据，该对象上有3个方法：getData(数据格式text/URL)、setData(text/URL，要放到剪贴板的文本)和clearData()。

let textbox = document.getElementById('top-nav-search-input');
textbox.addEventListener("paste", event=> {
    let text = event.clipboardData.getData("text");
    console.log(text);
});

3. 自动切换

  // 
  //   
  //   
  //   
  // 
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
      if(form.elements[i] == target){
        if(form.elements[i + 1]){
          form.elements[i+1].focus();
        }
        return;
      }
    }
  }
}
let inputIdx = ['tel1','tel2','tel3'];
for(let id of inputIdx){
  let textbox = document.getElementById(id);
  textbox.addEventListener("keyup", tabForward)
}

HTML5 约束验证API

1. 必填字段 required

"text" name="tel1" id="tel1" maxlength="3" required>

2. 更多输入类型

• number
• range
• datetime
• datetime-local
• date
• month
• week
• time
• url
• email

"url" />
<input type="email" />

3. 数值范围

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

两个方法：stepUp() 和 stepDown()，接受一个加上或减去的数值

4. 输入模式

pattern 属性，用于指定一个正则表达式

"text" pattern="\d+" name="count">

5. 检测有效性

checkValidity() 方法检测表单中任意给定字段是否有效，返回布尔值。可以调用在单个字段元素中或整个表单。

validity 属性会告诉我们字段为什么有效或无效。这个属性是一个对象，包含一系列返回布尔值的属性。

• customError：如果设置了 setCustomValidity()就返回 true，否则返回 false。
• patternMismatch：如果字段值不匹配指定的 pattern 属性则返回 true。
• rangeOverflow：如果字段值大于 max 的值则返回 true。
• rangeUnderflow：如果字段值小于 min 的值则返回 true。
• stepMisMatch：如果字段值与 min、 max 和 step 的值不相符则返回 true。
• tooLong：如果字段值的长度超过了 maxlength 属性指定的值则返回 true。
• 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.");
    }
}

6. 禁用验证

通过指定 novalidate 属性可以禁止对表单进行任何验证：

"post" action="/signup" novalidate>
 

如果一个表单中有多个提交按钮，那么可以给特定的提交按钮添加 formnovalidate 属性，指定通过该按钮无须验证即可提交表单

选择框编程

使用select 和option 元素创建。属性和方法：

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

option 元素属性：

• index：索引
• label：选项标签
• selected：布尔值，是否选中
• text：选项的文本
• value：选项的值

选项处理

selectedIndex 属性获得选中选项。如果是多选，只返回第一个索引

添加选项

// dom方法
let newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option text");
selectbox.appendChild(newOption);
 
// Option 构造函数 、 add() 方法
let newOption2 = new Option("Option text", "option value");
selectbox.add(newOption2, undefined);

移除选项

// 1
selectbox.removeChild(selectbox.options[0]);
 
// 2
selectbox.remove(0);

移除和重排选项

通过DOM 方法可以直接将某个选项从第一个选项框移动到第二个选项框。使用appendChild(),如果是以后的元素，则该元素会先从其父元素中移除，然后再插入指定位置。

如果要移动到特定位置，可以使用inertBefore()

富文本编辑

在空白HTML中嵌入iframe，设置属性designMode

 
window.addEventListener("load", ()=>{
  frames["richedit"].document.designMode = "on"
})

使用contenteditable

可以给任何元素指定 contenteditable 属性，该元素即可编辑，类似textarea元素。可能的值：true、false、inherit（继承父元素的设置）

富文本选择

getSelection() 方法可以获得富文本编辑器的选区。返回表示当前选中文本的Selection 对象，每个对象都拥有以下属性：

• anchorNode：选区开始的节点
• anchorOffset：在anchorNode 中，从开头到选区开始跳过的字符数
• focusNode：选区结束的节点
• focusOffset：focusNode中包含在选区内的字符数
• isCollapsed：布尔值，表示选区起点和终点是否在同一个地方
• rangeCount：选区中包含的DOM 范围数量

方法：

• addRange(range)：把给定的DOM范围添加到选区
• collapse(node, offset)：将选取折叠到给定节点中给定的文本偏移处
• collapseToEnd()：将选区折叠到终点
• collapseToStart()：将选区折叠刀起点
• containsNode(node)：确定给定节点是否包含在选区中
• deleteFromDocument()：从文档中删除选区文本。
• extend(node, offset)：通过将focusNode和 focusOffset 移动到指定值来扩展选区。
• getRangeAt(index)：返回选区中指定索引处的DOM 范围
• removeAllRanges()：从选区中移除所有DOM 范围
• removeRange(range)：从选区中移除指定的DOM范围
• selectAllChildren(node)：清除选区并选择给定节点的所有子节点
• toString()：返回选区中的文本内容