JavaScript基础知识总结—

表单基础知识

在HTML中，表单是使用form元素来表示的，JS中对应的是HTMLFormElement类型。它同样继承自HTMLElement，还有一些自己的方法：
1.acceptCharset：服务器能处理的字符集
2.action：接受请求的URL
3.elements：表单中所有控件的集合（HTMLCollection）
4.enctype：请求的编码类型
5.length：表单中所有控件的数量
6.method：要发送的HTTP请求类型，通常是get或post
7.name：表单的名称
8.reset()：将所有表单域重置为默认值
9.submit()：提交表单
10.target：用于发送请求和接收响应的窗口名称
通过document.forms可以取得页面中所有的表单。在这个集合里，可以通过数值索引或 name 值来取得特定的表单。

var firstForm = document.forms[0];
var myForm = document.forms["form2"];

提交表单

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

//html

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

//js
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event) {
  //取得事件对象
  event = EventUtil.getEvent(event);
  //阻止默认事件
  EventUtil.preventDefault(event);
});

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

firstForm.submit();

重置表单

就是清空所有表单数据

这同样会触发一个reset事件

var form = document.getElementById("myForm");
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
共有的表单字段属性:
1.disabled
2.form：指向当前字段所属的表单的的指针，只读
3.name：当前字段的名称
4.readOnly：当前字段是否只读
5.tabIndex：当前字段的切换序号
6.type：“checkbox”、“radio”
7.value：当前字段将被提交给服务器的值，对于文件字段来说这个属性是只读的，包含文件在计算机中的路径
JS可以动态修改他们。

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

避免多次提交表单就可以在submit事件中禁用提交按钮。
共有的表单字段方法:
1.focus()
2.blur()
注：focus不能聚焦到没有被显示出来的属性。HTML5有autofocus属性。
共有的表单字段事件
1.blur
2.change
3.focus

文本框脚本

文本框有两种input和textarea


initial value

在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个属于剪贴板的事件：

1.beforecopy
2.copy
3.beforecut
4.cut
5.beforepaste
6.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的特性也能完成部分验证。
必填字段

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

除了email，url还有"number"，"range"，"datetime"，"datetime-local"，"date"，"month"，"week"，"time"不过支持并不好。
数值范围

 
//想用户输入0到100的值，而且必须是5的倍数
input.stepUp();     //加 1 
input.stepUp(5);    //加 5 
input.stepDown();   
input.stepDown(10);//减10

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

 
var pattern = document.forms[0].elements["count"].pattern;

检测有效性

checkValidity()，这个方法可以用在整个表单，也可以用在某个字段。有效返回true。

if(document.forms[0].checkValidity()){
  //表单有效
} else{
  //表单无效
}

validity，这个属性是个对象，会更加详细的告诉你为什么字段有效或无效。这个对象中包含一系列属性，都是布尔值：
1.customError：如果设置了setCustomValidity()则为true，否则为false
2.patternMismatch：如果设置了和指定的pattern不匹配，返回true
3.rangeOverflow：如果值比max大，返回true
4.rangeUnderflow：如果值比min小，返回true
5.stepMisMatch：如果min和max之间的步长值不符合step，返回true
6.tooLong：如果值的长度超过了maxlength属性指定的长度，放回true。有的浏览器（如Firefox4），会自动约束字符数量。
7.typeMismatch：如果值不是“url”或者“mail”要求的格式，返回true
8.valid：如果这里的其他属性都是false，返回true。checkValidity()也要求有相同的值
9.valueMissing：如同标注为required的字段没有值，返回true。

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.");
    }
}

禁用验证

     
      
 
document.forms[0].noValidate = true; //

 
document.forms[0].elements["btnNoValidate"].formNoValidate = true;

选择框脚本

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

选择框是通过元素。

JavaScript基础知识总结——表单脚本

表单基础知识

文本框脚本

选择框脚本