表单脚本

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 属性；
• 操作富文本；
• 富文本选区；
• 表单与富文本；