1. 表单的基础知识
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单
1.1 提交表单
- 提交表单时可能出现的最大问题，就是重复提交表单。在第一次提交表单后，如果长时间没有反应，
用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），
或者会造成错误（如果用户是下订单，那么可能会多订好几份）。解决这一问题的办法有两个：
在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的表单提交操作。
1.2 重置表单
<input type="reset" value="Reset Form">
1.3 表单字段
var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
1.3.1 共有的表单字段属性
var form = document.getElementById("myForm");
var field = form.elements[0];
//修改 value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性（不推荐，但对<input>来说是可行的）
field.type = "checkbox";
//避免多次提交表单
//注意，不能通过 onclick 事件处理程序来实现这个功能，原因是不同浏览器之间存在“时差”：
//有的浏览器会在触发表单的 submit 事件之前触发 click 事件，而有的浏览器则相反。
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});
1.3.2 共有的表单字段方法
//focus() 和 blur()
//可以侦听页面的 load 事件，并在该事件发生时在表单的第一个字段上调用 focus()方法
EventUtil.addHandler(window, "load", function(event){
document.forms[0].elements[0].focus();
});
//HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，
//不用 JavaScript 就能自动把焦点移动到相应字段。例如：
<input type="text" autofocus>
document.forms[0].elements[0].blur();
1.3.3 共有的表单字段事件
2. 文本框脚本
<input type="text" size="25" maxlength="50" value="initial value">
<textarea rows="25" cols="5">initial value</textarea>
2.1 选择文本
//在文本框获得焦点时选择其所有文本，这是一种非常常见的做法，特别是在文本框包含默认值的时候。
//因为这样做可以让用户不必一个一个地删除文本。下面展示了实现这一操作的代码。
EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});
//获取用户所选择的文本内容
function getSelectedText(textbox){
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
} else if (document.selection){
return document.selection.createRange().text;
}
}
//设置选择部分文本
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"
2.2 过滤输入
2.3 自动切换焦点
2.4 HTML5 约束验证 API
- 必填字段；
- 其他输入类型；
- 数值范围；
- 输入模式；
- 检测有效性；
- 禁用验证；
3. 选择框脚本
- 选择选项；
- 添加选项；
- 移除选项；
- 移动和重排选项；
4. 表单序列化
5. 富文本编辑
- 使用 contenteditable 属性；
- 操作富文本；
- 富文本选区；
- 表单与富文本；