JS学习13（表单脚本）

表单基础知识

在HTML中，表单是使用form元素来表示的，JS中对应的是HTMLFormElement类型。它同样继承自HTMLElement，还有一些自己的方法：

• acceptCharset：服务器能处理的字符集
• action：接受请求的URL
• elements：表单中所有控件的集合（HTMLCollection）
• enctype：请求的编码类型
• length：表单中所有控件的数量
• method：要发送的HTTP请求类型，通常是get或post
• name：表单的名称
• reset()：将所有表单域重置为默认值
• submit()：提交表单
• target：用于发送请求和接收响应的窗口名称

除了通过普通的方法获得form元素，还可以通过document.forms来获得页面中的所有表单。在这个集合中可以通过数值索引或name值来取得特定的表单。

var firstForm = document.forms[0]; 
var myForm = document.forms["myForm"];
alert(firstForm.name);

提交表单

用户单击提交按钮或图像按钮时就回提交表单。

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>
<input type="image" src="graphic.gif">

表单中存在上述任何一种按钮时，在表单中元素具有焦点的情况下，按回车就可以提交该表单。
submit同样是一种事件类型，通过设置事件处理函数可以改变其行为，比如取消掉。

EventUtil.addHandler(firstForm, "submit", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

可以通过代码来触发submit操作，但是不会触发submit事件。

firstForm.submit();

重置表单

就是清空所有表单数据

<input type="reset" value="Reset Form">
<button type="reset">Reset Form</button>

这同样会触发一个reset事件

EventUtil.addHandler(form, "reset", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

使用form.reset()方法重置表单时还是会触发reset事件的。

表单字段

每个表单都有elements属性，该属性时表单中所有表单元素的集合，是有序的。通过位置和name都可以访问。

alert(firstForm.elements[0].name);
alert(firstForm.elements["password"].name);
alert(firstForm.elements.length);

如果有相同name的元素，那么就回返回一个NodeList
共有的表单字段属性

• disabled
• form：指向当前字段所属的表单的的指针，只读
• name：当前字段的名称
• readOnly：当前字段是否只读
• tabIndex：当前字段的切换序号
• type：“checkbox”、“radio”
• value：当前字段将被提交给服务器的值，对于文件字段来说这个属性是只读的，包含文件在计算机中的路径

JS可以动态修改他们。

var field = firstForm.elements[0];
field.value = "Another value";
alert(field.form === firstForm);
field.focus();
field.disabled = true;
field.type = "checkbox";

避免多次提交表单就可以在submit事件中禁用提交按钮。
共有的表单字段方法
每个表单字段都有两个方法focus()和blur()，focus不能聚焦到没有被显示出来的属性。HTML5有autofocus属性。
共有的表单字段事件
blur
change
focus

文本框脚本

文本框有两种input和textarea

<input type="text" size="25" maxlength="50" value="initial value">
<textarea rows="25" cols="5">initial value</textarea>

在JS中可以使用value属性来获取他们的内容。
特别提醒，处理文本框的值的时候不要使用标准DOM修改特性或文本子节点的方法，使用value属性，这样才能保证value属性的值（最终被提交到服务器的）和显示的值是一致的。

选择文本

上述两种文本框都支持select方法，这个方法用于选择文本框中所有文本。
这个在焦点移到输入框时自动选择其中的文本。

var field = firstForm.elements[1];
EventUtil.addHandler(field, "focus", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    target.select();
});

选择事件
选择文本框内的文本或使用select()时会触发select事件。
取得选择的文本
HTML5中使用这两个属性selectionStart、selectionEnd取得选择的文本。
IE8及以下不支持，使用替代方案，不管用户在页面上选择了什么都会创建一个document.selection对象

EventUtil.addHandler(field, "select", function(event){
    console.log(getSelectedText(field));
});
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;
    }
}

选择部分文本
刚才的select方法只能选择全部文本，setSelectionRange()方法接收两个参数要选择的第一个字符的索引和最后一个字符的索引。然后把焦点移过来才能看到

textbox.setSelectionRange(0, 3);
text.focus();

IE8不支持，又得用范围那一套。

function selectText(textbox, startIndex, stopIndex){
    if (textbox.setSelectionRange){
        textbox.setSelectionRange(startIndex, stopIndex);
    } else if (textbox.createTextRange){
        var range = textbox.createTextRange();
        range.collapse(true);
        range.moveStart("character", startIndex);
        range.moveEnd("character", stopIndex - startIndex);
        range.select();
    }
    textbox.focus();
}
selectText(text,0,3);

过滤输入

屏蔽字符
通过阻止keypress的默认事件来阻止用户输入。
像这样就所有的字符都输入不了啦，不过粘贴，用输入法之类的输入并不通过keypress的就阻止不了了呦~，改成keydown事件用ctrl的粘贴也会被阻止：

EventUtil.addHandler(textbox, "keypress", function(event){
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
});

针对特定的字符可以做特定的操作，比如只屏蔽数字键：

EventUtil.addHandler(text, "keypress", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    var charCode = EventUtil.getCharCode(event);
    if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
        EventUtil.preventDefault(event);
    }
});

操作剪贴板
有6个属于剪贴板的事件：

• beforecopy
• copy
• beforecut
• cut
• beforepaste
• paste

beforecopy、beforecut、beforepaste，在IE中一直会在真正的复制粘贴前被触发，其他浏览器中貌似不大好用。就用另外3个就足够啦。
在这个事件中clipboardData使用来访问剪贴板中的数据，IE中是window.clipboardData，其他是event.clipboardData需要做下兼容。它有3个方法：getData()、setData()、clearData()，他们接收的参数是数据类型，浏览器之间也有差异需要兼容~：

getClipboardText: function(event){         
    var clipboardData = (event.clipboardData || window.clipboardData);         
    return clipboardData.getData("text");     
},
setClipboardText: function(event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){             
        return window.clipboardData.setData("text", value);         
    }     
}

剪贴板事件时调用一下，就可以控制复制粘贴的内容啦，知乎就是这么干的。

EventUtil.addHandler(text, "paste", function(event){
    event = EventUtil.getEvent(event);
    var text = EventUtil.getClipboardText(event);
    if (!/^\d*$/.test(text)){
        EventUtil.preventDefault(event);
    }
});

自动切换焦点

挺便利的小功能

(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");     
    var textbox2 = document.getElementById("txtTel2");     
    var textbox3 = document.getElementById("txtTel3");
    EventUtil.addHandler(textbox1, "keyup", tabForward);     
    EventUtil.addHandler(textbox2, "keyup", tabForward);     
    EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

HTML5约束验证API

脱离JS即便JS不能加载，用HTML5的特性也能完成部分验证。
必填字段

<input type="text" name="username" required> 

其他输入类型
有的输入字段自带验证：

<input type="email" name ="email"> 
<input type="url" name="homepage"> 

数值范围
除了email，url还有”number”，”range”，”datetime”，”datetime-local”，”date”，”month”，”week”，”time”不过支持并不好。
数值类型一般都支持min，max，step

<input type="number" min="0" max="100" step="5" name="count"> 
input.stepUp();     //加 1 
input.stepUp(5);    //加 5 
input.stepDown();   
input.stepDown(10);

输入模式
这个属性是一个正则表达式

<input type="text" pattern="\d+" name="count"> 
var pattern = document.forms[0].elements["count"].pattern; 

检测有效性
checkValidity()，这个方法可以用在整个表单，也可以用在某个字段。有效返回true。
validity，这个属性是个对象，会更加详细的告诉你为什么字段有效或无效。这个对象中包含一系列属性，都是布尔值：

• customError：如果设置了setCustomValidity()则为true，否则为false
• patternMismatch：pattern
• rangeOverflow：max
• rangeUnderflow：min
• stepMisMatch
• tooLong
• typeMismatch：mail、url
• valid：所有的，和checkValidity()等同 ‰
• valueMissing：required

if (input.validity && !input.validity.valid){     
    if (input.validity.valueMissing){
        alert("Please specify a value.")
    } else if (input.validity.typeMismatch){
        alert("Please enter an email address.");
    } else {
        alert("Value is invalid.");
    }
}

禁用验证

<form method="post" action="signup.php" novalidate>     
    <!--表-->  
</form> 
document.forms[0].noValidate = true; // 

或者按钮

<input type="submit" formnovalidate name="btnNoValidate"         value="Non-validating Submit"> 
document.forms[0].elements["btnNoValidate"].formNoValidate = true; 

选择框脚本

选择框通过select和option元素创建。select在JS中为HTMLSelectElement。有下列属性和方法：

• add(newOption, relOption)：向控件中插入新的option元素，位置在relOption之前。 ‰
• multiple：就是HTML中的multiple，表示是否允许多项选择 ‰
• options控件中所有option的HTMLCollection
• remove(index)
• selectedIndex：没有选中的项时为-1
• size：选择框中可见行数

option在JS中为HTMLOptionElement，为了便于访问数据，有下列属性和方法：

• index
• label
• selected
• text
• value

表单序列化

随着Ajax的出现，表单序列化已经成为了常见需求。在JS中，可以利用表单字段的type属性，连同name和value一起实现对表单的序列化。
在浏览器将表单发送给服务器之前：

• 对表单字段的名称和值进行URL编码，使用&分割
• 不发送禁用的表单字段
• 只发送勾选的复选框和单选按钮
• 不发送type为reset和button的按钮
• 多选选择框中的每个选中的值单独一个条目
• select元素的值，就是选中的option元素的value特性的值如果option元素没有value，则是option元素的文本值。

function serialize(form){
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
    for (i=0, len=form.elements.length; i < len; i++){
        field = form.elements[i];
        switch(field.type){
            case "select-one":
            case "select-multiple":
                if (field.name.length){
                    for (j=0, optLen = field.options.length; j < optLen; j++){
                        option = field.options[j];
                        if (option.selected){
                            optValue = "";
                            if (option.hasAttribute){
                                optValue = (option.hasAttribute("value") ?
                                    option.value : option.text);
                            } else {
                                //兼容IE
                                optValue = (option.attributes["value"].specified ?
                                    option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name) + "=" +
                                encodeURIComponent(optValue));
                        }
                    }
                }
                break;
            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;
            case "radio":
            case "checkbox":
                if (!field.checked){
                    break;
                }
            default:
                if (field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" +
                        encodeURIComponent(field.value));
                }
        }
    }
    return parts.join("&");
}

富文本编辑

坑待填