只要表單中存在上面列出的任何一種按鈕，那麼在對應表單控制項擁有焦點的情況下，按下回車鍵就可以提交表單。 （textarea除外，在文字區中回車會換行）。如果表單沒有提交按鈕，安回車鍵不會提交表單。
注意，透過上述方式提交表單，瀏覽器會在將請求傳送給伺服器之前觸發submit事件。
這樣就可以決定是否需要驗證表單。阻止這個事件的預設行為就可以取消表單提交。
我們專案中，請求透過ajax提交，防重複提交的方式大致類似於上述第（2）種。攔截ajax發送前、發送成功，發送完成過程，使用狀態機標識目前處於哪種狀態（loading、resubmit、success、error）。當使用者請求ajax時，我們判斷目前處於哪種狀態：
| 屬性 | #作用說明 |
|---|
| disabled | 布林值，表示目前欄位是否已停用 |
##form | 指向目前欄位所屬表單的指標；只讀 |
#name | 目前欄位的名稱 |
readOnly | 布林值，表示目前欄位是否只讀 |
#tabIndex | 表示目前欄位的切換（tab）序號 |
#type | 目前欄位的類型 |
value | 目前欄位被提交給伺服器的值。對檔案欄位來說，這個屬性是唯讀的，包含著檔案在電腦的路徑 |
#（2）表单字段方法
window.addEventListener("load", function() {
document.forms[0].elements[0].focus(); // 让表单第一个元素获取焦点});123登入後複製
HTML5中表单字段新增了autofoucs属性。
<input type="text" autofoucs />1
登入後複製
（3）表单字段事件
表单错误提示流程：利用focus事件修改文本框的背景颜色，以便清楚表明这个字段获取了焦点；利用blur事件恢复文本框的背景颜色；利用change事件在用户输入了非规定字符时提示错误。
在项目中的validate插件，只用到了blur和focus事件。因为某些浏览器中，blur事件会先于change事件；有些会恰好相反！
二、文本框脚本
HTML中，有两种方式表示文本框：单行文本框<input type="text">、多行文本框<textarea>。
（1）单行文本框
通过设置size特性，可以指定文本框中能够显示的字符数；通过设置value特性，可以指定文本框的初始值；通过设置maxlength特性，可以指定文本框可以接受的最大字符数。
<!-- 显示5个字符（input 元素的宽度），输入不能超过10个字符--><input type="text" value="初始值放到这里" size="5" maxlength="10"/>12
登入後複製
（2）多行文本框
rows设置文本框行数，cols设置文本框列数。
<textarea cols="10" rows="5">初始值必须放在这里</textarea>1
登入後複製
上述两种文本框，都会将用户输入的内容保存在value属性中！！！
1. 选择文本
（1）选择（select）事件
选择文本框中所有文本select()方法，对应的是一个select事件，同样存在触发时间的问题！
var input = document.getElementById("name");
input.addEventListener("focus", function(event) { event.target.select();
});1234登入後複製
（2）取得选择的文本
var textarea = document.getElementById("content");textarea.addEventListener("select", function(event) {
if(typeof textarea.selectionStart === "number") {
console.log(textarea.value.substring(textarea.selectionStart, textarea.selectionEnd));}else if(document.selection){
// IE下
console.log(document.selection.createRange().text);}
});123456789登入後複製
（3）选择部分文本
setSelectionRange(要选择的第一个字符索引, 要选择的最后一个字符索引)
注意要看到被选择的文本，必须在调用setSelectionRange()之前或之后立即将焦点设置到文本框。
function selectText(textbox, startIndex, endIndex) { if(textbox.setSelectionRange) {
textbox.setSelectionRange(startIndex, endIndex);
} else if(textbox.createTextRange) { var range = textbox.createTextRange(); range.collapse(true); range.moveStart("character", startIndex); range.moveEnd("character", endIndex - startIndex); range.select();
} // 将焦点设置到文本框上
textbox.focus();
}12345678910111213登入後複製
部分选择文本的技术在实现高级文本输入框时很有用，例如提供自动完成建议的文本框就可以使用这种技术。
2. 过滤输入
（1）屏蔽字符
当需要用于输入的文本中不能包含某些字符时，例如手机号，只能输入字符！
var input = document.getElementById("name");
input.addEventListener("keypress", function(event) { if(!/\d/.test(String.fromCharCode(event.charCode)) && event.charCode > 9 && !event.ctrlKey) { // 只允许输入数字和退格特殊键以及Ctrl event.preventDefault();
}
});1234567登入後複製
更极端的方式，可以通过event.preventDefault();阻止其默认行为来禁止按键操作，即文本框只读！！
（2）操作剪贴板
var EventUtil = {
getClipboardText: function(event){ var clipboardData = (event.clipboardData || window.clipboardData); // 兼容IE return clipboardData.getData("text");
},
setClipboardText: function(event, value){ if (event.clipboardData){ event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){ // 兼容IE
window.clipboardData.setData("text", value);
}
}
};var input = document.getElementById("name");
input.addEventListener("paste", function(event) { var data = event.clipboardData.getData("text");
console.log(data); if(!/^\d*$/.test(data)) { // 只允许粘贴数字 event.preventDefault();
}
});1234567891011121314151617181920212223登入後複製
3. 自动切换焦点
用户填写完当前字段时，自动将焦点切换到下一个字段。
<p>Enter your telephone number:</p><input type="text" name="tel1" id="txtTel1" size="3" maxlength="3" ><span>-</span><input type="text" name="tel2" id="txtTel2" size="3" maxlength="3" ><span>-</span><input type="text" name="tel3" id="txtTel3" size="4" maxlength="4" >123456
登入後複製
(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"),
textbox2 = document.getElementById("txtTel2"),
textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward); })();12345678910111213141516171819202122232425登入後複製
4. HTML5约束验证API
（1）必填字段：<input type="text" required />
（2）特殊输入类型：<input type="email | url" />
（3）数值范围：<input type="number" min="0" max="10" />
（4）输入模式：<input type="text" pattern="\d+" />注意，模式的开头和末尾不用加^和$符合（默认已经有了）
（5）检测有效性：checkValidatity()
（6）禁用验证：
<!-- 整个表单不进行验证 --><form method="post" action="" novalidate ><!-- 某个按钮提交不必验证表单--><input type="submit" formnovalidate name="btnNoValidate" />1234
登入後複製
三、选择框脚本
<select>和<option>元素创建
HTMLSelectElement的属性和方法：
| 属性和方法 | 作用说明 |
|---|
| add(newOption, relOption) | 向控件中插入新项，其位置在相关项relOption之前 |
| multiple | 是否支持多项选择 |
| options | 所有项集合 |
| remove(index) | 移除给定位置的选项 |
| selectIndex | 基于0的选中项的索引，如果没有选中项，则该值为-1；对于支持多选的控件，只保存选中项的第一项索引 |
| size | 选择框中可见的行数 |
HTMLOptionElement的属性和方法：
| 属性和方法 | 作用说明 |
|---|
| index | 当前选项在options集合中的索引 |
| label | 当前选项的标签 |
| selected | 当前选项是否被选中 |
| text | 选项的文本 |
| value | 选项的值 |
<form method="post" action="" id="myForm">
<label for="selLocation">Where do you want to live?</label>
<select name="location" id="selLocation">
<option value="Sunnyvale, CA">Sunnyvale</option>
<option value="Los Angeles, CA">Los Angeles</option>
<option value="Mountain View, CA">Mountain View</option>
<option value="">China</option>
<option>Australia</option>
</select>
</form>12345678910登入後複製
// 选择上述每个选项后，value值分别为：["Sunnyvale, CA", "Los Angeles, CA", "Mountain View, CA", "", "Australia"]
document.getElementById("selLocation").value; // 获得第一个选项的文本和值
document.forms[0].elements["location"].options[0].text;document.forms[0].elements["location"].options[0].value;12345登入後複製
（1）展示规则：有value属性且值不为空，则展示value属性的值；否则展示该项的文本值。
（2）value值规则：有value属性（不管是否为空），获得的都是对应value属性的值；否则为该项文本值。
1. 选择选项
function getSelectedOptions(selectbox){ var result = new Array(); var option = null; for (var i=0, len=selectbox.options.length; i < len; i++){
option = selectbox.options[i]; if (option.selected){
result.push(option);
}
} return result;
}12345678910111213登入後複製
2. 添加选项
（1）DOM方式
var newOption = document.createElement("option");newOption.appendChild(document.createTextNode("Option text"));newOption.setAttribute("value", "Option value");selectbox.appendChild(newOption);1234登入後複製
（2）Option构造函数
var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);12登入後複製
（3）选择框的add方法（最佳方案）
var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); // 插入到最后12登入後複製
3. 移除选项
（1）DOM方
selectbox.removeChild(selectbox.options[0]);1
登入後複製
（2）选择框的remov
selectbox.remove(0);1
登入後複製
（3）将相应的选项设置为null（遗留机制）
selectbox.options[0] = null;1
登入後複製
4. 移动和重排选项
DOM的appendChild方法（只能添加到最后），如果appendChild传入一个文档中已有的元素，那么就会先从该元素的父节点中移除它，再把它添加到指定的位置。
// 将第一个选择框中的第一个选项移动到第二个选择框中
var selectbox1 = document.getElementById("selLocations1"),
selectbox2 = document.getElementById("selLocations2");selectbox2.appendChild(selectbox1.options[0]); 1234登入後複製
DOM的insertBefore方法
// 将选择框中的选项向后移动一个位置
var optionToMove = selectbox.options[selectbox.options.length - 1]; selectbox.insertBefore(optionToMove, selectbox.options[0]);123
登入後複製
四、表单序列化
五、富文本编辑
contenteditable：用户立即可编辑该元素
data:text/html, <html contenteditable>1
登入後複製
