第一百二十二節，JavaScript表單處理

JavaScript表單處理

 

學習要點：

1.表單介紹

2.文本框腳本

3.選擇框腳本

 

爲了分擔服務器處理表單的壓力，JavaScript提供了一些解決方案，從而大大打破了到處依賴服務器的局面。

一．表單介紹

在HTML中，表單是由<form>元素來表示的，而在JavaScript中，表單對應的則是HTMLFormElement類型。HTMLFormElement繼承了HTMLElement，所以它擁有HTML元素具備的默認屬性，而且還獨有本身的屬性和方法：

 

HTMLFormElement屬性和方法

屬性或方法	說明
acceptCharset	服務器可以處理的字符集
action	接受請求的URL
elements	表單中全部控件的集合
enctype	請求的編碼類型
length	表單中控件的數量
name	表單的名稱
target	用於發送請求和接受響應的窗口名稱
reset()	將全部表單重置
submit()	提交表單

 

獲取表單<form>對象的方法有不少種，以下：

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var form =  document.getElementById('get');  //經過ID獲取到表單form標籤
    alert(form.tagName);  //打印出form標籤

    var form2 = document.getElementsByTagName('form');  //經過標籤名稱獲取到標籤元素數組
    alert(form2[0].tagName); //經過數組下標，打印出form標籤

    var form3 = document.rgj;  //經過name名稱直接獲取元素【不推薦】
    alert(form3.tagName);  //打印出form標籤
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：最後一種方法使用name名稱直接獲取元素，已經不推薦使用，這是向下兼容的早期用法。問題頗多，好比有兩個相同名稱的，變成數組；並且這種方式之後有可能會不兼容。

 

forms屬性，直接獲取表單<form>標籤，後面能夠跟下標獲取指定的<form>標籤，也能夠跟name名稱來獲取指定的<form>標籤

使用方式：
document.forms[下標或者name名稱]

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var form = document.forms[0];  //forms屬性，直接獲取表單<form>標籤，後面能夠跟下標獲取指定的<form>標籤，也能夠跟name名稱來獲取指定的<form>標籤
    alert(form.tagName);  //打印出標籤名稱

    var form2 = document.forms['rgj'];
    alert(form2.tagName);  //打印出標籤名稱
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

onsubmit表單提交事件，當用戶提交表單時激發函數
表單form對象.onsubmit = 執行函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch">
//     <button>提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var form = document.forms[0];  //forms屬性，直接獲取表單<form>標籤，
    //onsubmit表單提交事件，當用戶提交表單時激發函數
    addEvent(form,'submit',function () {
        alert('提交');  //當用戶提交時打印提交
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 form對象能夠阻止默認行爲，阻止後沒法提交表單

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch">
//     <button>提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var form = document.forms[0];  //forms屬性，直接獲取表單<form>標籤，
    //onsubmit表單提交事件，當用戶提交表單時激發函數
    addEvent(form,'submit',function (evt) {
        preDef(evt); //阻止form默認行爲，阻止後不能夠提交
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

//跨瀏覽器兼容，阻止默認行爲
function preDef(evt) { //接收event對象
    //若是不能執行evt，說明是IE瀏覽器就用window.event獲取event對象
    var e = evt || window.event;
    //判斷W3C，阻止默認行爲，若是爲真
    if (e.preventDefault) {
        //就用W3C，阻止默認行爲
        e.preventDefault();
    } else {
        //不然就用ie的屬性returnValue阻止行爲
        e.returnValue = false;
    }
}

 

submit()方法，用來自定義提交方法，也就是能夠用這個方法自定義提交元素
使用方式：
form對象.submit()

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch">
//     <button type="button">按鈕</button>     這個是普通按鈕不能提交，咱們能夠用submit()方法自定義成提交按鈕
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    var an =  document.getElementById('an');  //經過id獲取到普通按鈕
    //給普通按鈕添加一個點擊事件，點擊後執行匿名函數
    addEvent(an,'click',function () {
        get.submit();  //給表單添加提交方法
    })

});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 PS：在表單中儘可能避免使用name="submit"或id="submit"等命名，這會和submit()方法發生衝突致使沒法提交。

 

解決用戶不停重複提交

提交數據最大的問題就是重複提交表單。由於各類緣由，當一條數據提交到服務器的時候會出現延遲等長時間沒反映，致使用戶不停的點擊提交，從而使得重複提交了不少相同的請求，或形成錯誤、或寫入數據庫多條相同信息。

有兩種方法能夠解決這種問題：第一種就是提交以後，馬上禁用點擊按鈕；第二種就是提交以後取消後續的表單提交操做。

第一種就是提交以後，馬上禁用點擊按鈕；只適用於按鈕提交【不推薦】

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch">
//     <button id="tj" type="submit">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //給form標籤添加一個提交事件，提交後執行匿名函數
    addEvent(get,'submit',function () {
        //當第一個提交成功後，將提交按鈕的disabled屬性設置成true，禁止提交
        document.getElementById('tj').disabled = true;
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

第二種就是提交以後取消後續的表單提交操做。適用於各類提交，【推薦】

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch">
//     <button id="tj" type="submit">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    var jil = false;  //記錄提交
    //給form標籤添加一個提交事件，提交後執行匿名函數
    addEvent(get,'submit',function (evt) {
        //阻止表單默認行爲，也就是阻止表單提交
        preDef(evt);
        //若是記錄等於true，表示提交過了，直接退出
        if (jil == true) return;
        jil = true;  //若是沒提交過，就改變記錄
        get.submit();  //提交數據
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

//跨瀏覽器兼容，阻止默認行爲
function preDef(evt) { //接收event對象
    //若是不能執行evt，說明是IE瀏覽器就用window.event獲取event對象
    var e = evt || window.event;
    //判斷W3C，阻止默認行爲，若是爲真
    if (e.preventDefault) {
        //就用W3C，阻止默認行爲
        e.preventDefault();
    } else {
        //不然就用ie的屬性returnValue阻止行爲
        e.returnValue = false;
    }
}

PS：在某些瀏覽器，F5只能起到緩存刷新的效果，有可能獲取不到真正的源頭更新的數據。那麼使用ctrl+F5就能夠把源頭給刷出來。

 

重置表單

用戶點擊重置按鈕時，表單會被初始化。雖然這個按鈕還得以保留，但目前的Web已經不多去使用了。由於用戶已經填寫好各類數據，不當心點了重置就會所有清空，用戶體驗極差。

有兩種方法調用reset事件，第一個就是直接type="reset"便可；第二個就是使用fm.reset()方法調用便可。

onreset事件，表單重置事件，當用戶點擊重置後激發函數
使用方式：
form對象.onreset = 函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch">
//     <button id="tj" type="submit">提交</button>
//     <button id="zhzh" type="reset">重置</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //給form標籤添加一個重置事件，當點擊重置後激發函數
    addEvent(get,'reset',function () {
        alert('你點擊了重置');
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

reset()方法，自定義重置方法，能夠用這個給表單設置一個重置
使用方式：
form對象.reset()

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch">
//     <button id="tj" type="submit">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //添加一個根元素點擊事件，當在頁面任意地方點擊後執行函數
    addEvent(document,'click',function () {
        get.reset();  //執行重置方法，重置表單
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

表單字段

若是想訪問表單元素，可使用以前章節講到的DOM方法訪問。但使用原生的DOM訪問雖然比較通用，但不是很便利。表單處理中，咱們建議使用HTML DOM，它有本身的elements屬性，該屬性是表單中全部元素的集合。

elements屬性，獲取表單form元素裏的表單字段，也就是form標籤裏的其餘屬於form的標籤，主要只能獲取到表單字段其餘元素無效，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段，若是多個字段name值相同時返回相同name值的字段集合
使用方式：
form元素.elements
form元素.elements[下標或者name值]

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch">
//     <button id="tj" type="submit">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    alert(get.elements);  //獲取表單字段集合
    alert(get.elements[0]);  //經過下標獲取表單裏的第一個元素
    alert(get.elements['mch']); //經過name值獲取第一個元素
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

共有的表單字段屬性

除了<fieldset>元素以外，全部表單字段都擁有相同的一組屬性。因爲<input>類型能夠表示多種表單字段，所以有些屬性只適用於某些字段。如下羅列出共有的屬性：

 

屬性或方法	說明
disabled	布爾值，表示當前字段是否被禁用
form	指向當前字段所屬表單的指針，只讀
name	當前字段的名稱
readOnly	布爾值，表示當前字段是否只讀
tabIndex	表示當前字段的切換
type	當前字段的類型
value	當前字段的值

重點看幾個最經常使用的，其餘使用方式相同

value屬性，獲取或設置當前元素的value值
使用方式：
當前元素.value
當前元素.value = 'xxxx'

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    alert(mch.value);  //獲取當前元素的value值
    mch.value = '默認值2'; //設置當前元素的value值

});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

form屬性，獲取當前元素所屬form標籤
使用方式：
當前元素.form

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    alert(mch.form);  //form屬性，獲取當前元素所屬form標籤
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

disabled屬性，獲取或者設置當前元素的，禁用當前字段
使用方式：
當前元素.disabled
當前元素.disabled = true

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    alert(mch.disabled);  //disabled屬性，獲取或者設置當前元素的，禁用當前字段
    mch.disabled = true; //設置禁用當前字段
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

type屬性，獲取或者設置當前元素字段類型，【極不推薦】
使用方式：
當前元素.type
當前元素.type = 'xxx'

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    alert(mch.type);  //type屬性，獲取或者設置當前元素字段類型，
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 type屬性獲取返回屬性值以下

除了<fieldset>字段以外，全部表單字段都有type屬性。對於<input>元素，這個值等於HTML屬性的type值。對於非<input>元素，這個type的屬性值以下：

 

元素說明	HTML標籤	type屬性的值
單選列表	<select>...</select>	select-one
多選列表	<select multiple>...</select>	select-multiple
自定義按鈕	<button>...</button>	button
自定義非提交按鈕	<button type="button">...</button>	button
自定義重置按鈕	<button type="reset">...</button>	reset
自定義提交按鈕	<button type="submit">...</button>	submit

PS：<input>和<button>元素的type屬性是能夠動態修改的，而<select>元素的type屬性則是隻讀的。(在沒必要要的狀況下，建議不修改type)。

 

 

共有的表單字段方法

 

每一個表單字段都有兩個方法：foucs()和blur()。

 

方法	說明
focus()	將焦點定位到表單字段裏
blur()	從元素中將焦點移走

focus()方法，將焦點定位到表單字段裏
使用方式：
當前元素.focus()

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    mch.focus(); //focus()方法，將焦點定位到表單字段裏
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

blur()方法，從元素中將焦點移走
使用方式：
當前元素.blur()

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    mch.blur(); //blur()方法，從元素中將焦點移走
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

共有的表單字段事件

表單共有的字段事件有如下三種：

 

事件名	說明
onblur	當字段失去焦點時觸發
onchange	對於<input>和<textarea>元素，在改變value並失去焦點時觸發；對於<select>元素，在改變選項時觸發
onfocus	當前字段獲取焦點時觸發

 

onfocus事件，當前字段獲取焦點時觸發
使用方式：
當前元素.onfocus = 函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    //給當前元素添加一個onfocus事件，當前字段獲取焦點時觸發
    addEvent(mch,'focus',function () {
        alert('獲取焦點');
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

onblur事件，當字段失去焦點時觸發
使用方式：
當前元素.onblur = 函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    //給當前元素添加一個事件，onblur事件，當字段失去焦點時觸發
    addEvent(mch,'blur',function () {
        alert('失去焦點');
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

onchange事件，對於<input>和<textarea>元素，在改變value並失去焦點時觸發；對於<select>元素，在改變選項時觸發
使用方式：
當前元素.onchange = 函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="默認值">
//     <button id="tj" type="submit" name="mch2">提交</button>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    //給當前元素添加一個事件，onchange事件，對於<input>和<textarea>元素，在改變value並失去焦點時觸發；對於<select>元素，在改變選項時觸發
    addEvent(mch,'change',function () {
        alert('改變value並失去焦點');
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：關於blur和change事件的關係，並無嚴格的規定。在某些瀏覽器中，blur事件會先於change事件發生；而在其餘瀏覽器中，則剛好相反。

 

二．文本框腳本

在HTML中，有兩種方式來表現文本框：一種是單行文本框<input type="text">，一種是多行文本框<textarea>。雖然<input>在字面上有value值，而<textarea>卻沒有，但經過均可以經過value獲取他們的值。

獲取單行文本框和多行文本框的value值

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    var wb = get.elements['wb'];   //過name值獲取到多行文本框
    alert(mch.value);  //獲取單行文本框的value值
    alert(wb.value);  //獲取多行文本框的value值
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：使用表單的value是最推薦使用的，它是HTML DOM中的屬性，不建議使用標準DOM的方法。也就是說不要使用getAttribute()獲取value值。緣由很簡單，對value屬性的修改，不必定會反映在DOM中。

 

除了value值，還有一個屬性對應的是defaultValue，能夠獲得本來的value值，不會由於值的改變而變化。

defaultValue屬性，獲取表單本來的value值，不會由於值的改變而變化。
使用方式：
當前元素.defaultValue

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    mch.value = '修改';  //修改了value值
    alert(mch.value);   //獲取到文本框的value值
    alert(mch.defaultValue);   //defaultValue屬性，獲取表單本來的value值，不會由於值的改變而變化。
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

select()方法，將當前文本框裏的文本選中，
使用方式：
當前元素.select()

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    mch.select();  //select()方法，將當前文本框裏的文本選中，
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

選擇部分文本

在使用文本框內容的時候，咱們有時要直接選定部分文本，這個行爲尚未標準。Firefox的解決方案是：setSelectionRange()方法。這個方法接受兩個參數：索引和長度。

setSelectionRange()方法,選擇文本框裏指定範圍的文本，這個方法接受兩個參數：索引和長度。開始位置，選擇幾位,IE9如下不支持
使用方式：
當前對象.setSelectionRange(開始位置，選擇幾位)

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    //setSelectionRange()方法,選擇文本框裏指定範圍的文本，這個方法接受兩個參數：索引和長度。開始位置，選擇幾位
    mch.setSelectionRange(0,3);
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

除了IE，其餘瀏覽器都支持這種寫法(IE9+支持)

 

IE9如下想要選擇部分文本，可使用IE的範圍操做。

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window,'load',function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    var range = mch.createTextRange();        //建立一個文本範圍對象
    range.collapse(true);                    //將指針移到起點
    range.moveStart('character', 0);            //移動起點，character表示逐字移動
    range.moveEnd('character', 1);                //移動終點，同上
    range.select();                                //焦點選定

});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

結合上面兼容瀏覽器方案

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    getSelectText(mch,1,4); //執行選擇文本框裏指定範圍的文本函數

    //瀏覽器兼容，執行選擇文本框裏指定範圍的文本函數
    function getSelectText(text, start, num) {  //接收3個參數，參數1元素對象。參數2開始位置，參數3獲取結束位置
        if (text.setSelectionRange) {
            text.setSelectionRange(start, num);
            text.focus();
        } else if (text.createTextRange) {
            var range = text.createTextRange();        //建立一個文本範圍對象
            range.collapse(true);                    //將指針移到起點
            range.moveStart('character', start);            //移動起點，character表示逐字移動
            range.moveEnd('character', num - start);                //移動終點，同上
            range.select();
        }
    }
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

onselect事件，選中文本框文本後觸發
使用方式：
元素對象.onselect = 函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    //onselect事件，選中文本框文本後觸發
    addEvent(mch,'select',function () {
        alert('選擇文本');
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

取得選擇的文本

若是咱們想要取得選擇的那個文本，就必須使用一些手段。目前位置，沒有任何規範解決這個問題。Firefox爲文本框提供了兩個屬性：selectionStart和selectionEnd。

selectionStart屬性，獲取在文本框選擇文本的起始位置，IE9如下不支持
selectionEnd屬性，獲取在文本框選擇文本的結束位置，IE9如下不支持

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    //onselect事件，選中文本框文本後觸發
    addEvent(mch,'select',function () {
        alert(mch.selectionStart);  //selectionStart屬性，獲取在文本框選擇文本的起始位置
        alert(mch.selectionEnd);   //selectionEnd屬性，獲取在文本框選擇文本的結束位置
        //獲取到對象的value值，在用字符串截取函數，將鼠標選擇的起始位置和結束位置，傳入函數截取到選擇的字符串
        alert(this.value.substring(this.selectionStart, this.selectionEnd));
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

除了IE，其餘瀏覽器均支持這兩個屬性（IE9+已支持）。IE不支持，而提供了另外一個方案：selection對象，屬於document。這個對象保存着用戶在整個文檔範圍內選擇的文本信息。致使咱們須要作瀏覽器兼容。

selection對象，屬於document。這個對象保存着用戶在整個文檔範圍內選擇的文本信息，IE支持

createRange().text，獲取範圍內選擇的文本信息，IE支持

取得選擇的文本瀏覽器兼容

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <p id="p"></p>
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var mch = get.elements['mch'];  //經過name值獲取到第一個表單字段
    var p = document.getElementById('p');  //經過ID獲取p元素標籤
    //onselect事件，選中文本框文本後觸發
    addEvent(mch,'select',function (){
        //p元素的文本內容等於執行自定義兼容選擇文本函數，將文本框元素傳入函數
        p.innerHTML = getSelect(mch);
    });
});

//取得選擇的文本瀏覽器兼容
function getSelect(text) {  //接收元素對象
    //判斷瀏覽器若是支持selectionStart屬性
    if (typeof text.selectionStart == 'number') {  //說明不是IE
        //獲取到對象的value值，在用字符串截取函數，將鼠標選擇的起始位置和結束位置，傳入函數截取到選擇的字符串
        return text.value.substring(text.selectionStart, text.selectionEnd);
    } else if (document.selection) {  //說明是IE
        return document.selection.createRange().text;
    }
}

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：有一個最大的問題，就是IE在觸發select事件的時候，在選擇一個字符後當即觸發，而其餘瀏覽器是選擇想要的字符釋放鼠標鍵後才觸發。因此，若是使用alert()的話，致使跨瀏覽器的不兼容。咱們沒有辦法讓瀏覽器行爲保持統一，但能夠經過不去使用alert()來解決。

 

 

過濾輸入

爲了使文本框輸入指定的字符，咱們必須對輸入進的字符進行驗證。有一種作法是判斷字符是否合法，這是提交後操做的。那麼咱們還能夠在提交前限制某些字符鍵，

屏蔽某些字符鍵，讓用戶不能輸入不合法的字符，好比屏蔽除數字鍵外的字符鍵，這樣用戶就只能輸入數字

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var wb = get.elements['wb'];  //經過name值獲取到多行文本框

    //屏蔽非數字鍵的輸入
    addEvent(wb, 'keypress', function (evt) {  //給文本框添加一個鍵盤按鍵事件，當按下鍵盤按鍵時激發函數
        //若是不能執行evt，說明是IE瀏覽器就用window.event獲取event對象
        var e = evt || window.event;
        var anjbm = getCharCode(e);  //執行自定義誇瀏覽器獲取按鍵的編碼函數
        var anj = String.fromCharCode(anjbm); //將按鍵的編碼轉換成對應的按鍵字符
        if (!/\d/.test(anj) && e.charCode > 8){  //正則判斷若是輸入的不是數字，而且字符鍵所表明字符的ASCII編碼大於8
            preDef(evt); //阻止默認行爲，也就是不能輸入，只能輸入數字
        }
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

//跨瀏覽器兼容，阻止默認行爲
function preDef(evt) { //接收event對象
    //若是不能執行evt，說明是IE瀏覽器就用window.event獲取event對象
    var e = evt || window.event;
    //判斷W3C，阻止默認行爲，若是爲真
    if (e.preventDefault) {
        //就用W3C，阻止默認行爲
        e.preventDefault();
    } else {
        //不然就用ie的屬性returnValue阻止行爲
        e.returnValue = false;
    }
}

//誇瀏覽器獲取按鍵的編碼
function getCharCode(evt) {  //接收event對象
    //若是沒法直接獲取event對象，說明是IE瀏覽器，就用IE的window.event獲取event對象
    var e = evt || window.event;
    //判斷event對象的charCode屬性若是是數字類型
    if (typeof e.charCode == 'number') {
        //執行charCode屬性
        return e.charCode;
    } else {
        //不然執行keyCode屬性
        return e.keyCode;
    }
}

if (!/\d/.test(anj) && e.charCode > 8)

PS：前半段條件判斷只有數字才能夠輸入，致使常規按鍵，好比光標鍵、退格鍵、刪除鍵等沒法使用。部分瀏覽器好比Firfox，須要解放這些鍵，而非字符觸發的編碼均爲0；在Safari3以前的瀏覽器，也會被阻止，而它對應的字符編碼所有爲8，因此最後就加上charCode > 8的判斷便可。

PS：固然，這種過濾仍是比較脆落的，咱們還但願可以阻止裁剪、複製、粘貼和中文字符輸入操做才能真正屏蔽掉這些。

 

剪貼板事件

若是要阻止裁剪、複製和粘貼，那麼咱們能夠在剪貼板相關的事件上進行處理，JavaScript提供了六組剪貼板相關的事件：

 

事件名	說明
copy	在發生複製操做時觸發
cut	在發生裁剪操做時觸發
paste	在發生粘貼操做時觸發
beforecopy	在發生複製操做前觸發
beforecut	在發生裁剪操做前觸發
beforepaste	在發生粘貼操做前觸發

因爲剪貼板沒有標準，致使不一樣的瀏覽器有不一樣的解釋。Safari、Chrome和Firefox中，凡是before前綴的事件，都須要在特定條件下觸發。而IE則會在操做時以前觸發帶before前綴的事件。

若是咱們想要禁用裁剪、複製、粘貼，那麼只要阻止默認行爲便可。

oncut事件，在發生剪切操做時觸發
使用方式：
元素對象.oncut = 函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var wb = get.elements['wb'];  //經過name值獲取到多行文本框
    //oncut事件，在發生剪切操做時觸發
    addEvent(wb,'cut',function () {
        alert('在發生剪切操做時觸發');
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

阻止用戶剪切行爲

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var wb = get.elements['wb'];  //經過name值獲取到多行文本框
    //oncut事件，在發生剪切操做時觸發
    addEvent(wb,'cut',function (evt) {  //接收event對象
        preDef(evt);  //阻止默認行爲
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

//跨瀏覽器兼容，阻止默認行爲
function preDef(evt) { //接收event對象
    //若是不能執行evt，說明是IE瀏覽器就用window.event獲取event對象
    var e = evt || window.event;
    //判斷W3C，阻止默認行爲，若是爲真
    if (e.preventDefault) {
        //就用W3C，阻止默認行爲
        e.preventDefault();
    } else {
        //不然就用ie的屬性returnValue阻止行爲
        e.returnValue = false;
    }
}

 

oncopy事件，在發生複製操做時觸發
使用方式：
元素對象.oncopy = 函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var wb = get.elements['wb'];  //經過name值獲取到多行文本框
    //oncopy事件，在發生複製操做時觸發
    addEvent(wb,'copy',function (evt) {  //接收event對象
        preDef(evt);  //阻止默認行爲,不容許複製
        alert('阻止了複製行爲')
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

//跨瀏覽器兼容，阻止默認行爲
function preDef(evt) { //接收event對象
    //若是不能執行evt，說明是IE瀏覽器就用window.event獲取event對象
    var e = evt || window.event;
    //判斷W3C，阻止默認行爲，若是爲真
    if (e.preventDefault) {
        //就用W3C，阻止默認行爲
        e.preventDefault();
    } else {
        //不然就用ie的屬性returnValue阻止行爲
        e.returnValue = false;
    }
}

 

onpaste事件，在發生粘貼操做時觸發
使用方式：
元素對象.onpaste = 函數

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var wb = get.elements['wb'];  //經過name值獲取到多行文本框
    //onpaste事件，在發生粘貼操做時觸發
    addEvent(wb,'paste',function (evt) {  //接收event對象
        preDef(evt);  //阻止默認行爲,不容許粘貼
        alert('阻止了粘貼行爲');
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

//跨瀏覽器兼容，阻止默認行爲
function preDef(evt) { //接收event對象
    //若是不能執行evt，說明是IE瀏覽器就用window.event獲取event對象
    var e = evt || window.event;
    //判斷W3C，阻止默認行爲，若是爲真
    if (e.preventDefault) {
        //就用W3C，阻止默認行爲
        e.preventDefault();
    } else {
        //不然就用ie的屬性returnValue阻止行爲
        e.returnValue = false;
    }
}

當咱們裁剪和複製的時候，咱們能夠訪問剪貼板裏的內容，但問題是FireFox，Opera瀏覽器不支持訪問剪貼板。而且，不一樣的瀏覽器也有本身不一樣的理解。因此，這裏咱們就不在贅述。

 

文本框屏蔽中文輸入法

最後一個問題影響到可能會影響輸入的因素就是：輸入法。咱們知道，中文輸入法，它的原理是在輸入法面板上先存儲文本，按下回車就寫入英文文本，按下空格就寫入中文文本。

有一種解決方案是經過CSS來禁止調出輸入法：

style="ime-mode:disabled"                    //CSS直接編寫
元素對象.style.imeMode = 'disabled';            //或在JS裏設置也能夠

PS：但咱們也發先，Chrome瀏覽器卻沒法禁止輸入法調出。因此，爲了解決谷歌瀏覽器的問題，最好還要使用正則驗證已輸入的文本。

 

使用正則驗證已輸入的文本【推薦】

// <form id="get" name="rgj">
//     用戶名:<input type="text" name="mch" value="單行文本框">
//     <textarea name="wb">多行文本框</textarea>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var wb = get.elements['wb'];  //經過name值獲取到多行文本框
    //onkeyup：當用戶釋放鍵盤上的鍵觸發
    addEvent(wb,'keyup',function (evt) {  //接收event對象
        if(/[^\d]/g.test(wb.value)){  //正則匹配判斷當用戶輸入非數字時
            alert('請輸入數字！');
        }
        wb.value = wb.value.replace(/[^\d]/g, '');    //正則匹配當用戶輸入的是非數字時，把非數字都替換成空
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

自動切換焦點

爲了增長表單字段的易用性，不少字段在知足必定條件時(好比長度)，就會自動切換到下一個字段上繼續填寫。

// <form id="get" name="rgj">
//  <input type="text" name="user1" maxlength="1" />    //只能寫1個
//     <input type="text" name="user2" maxlength="2" />    //只能寫2個
//     <input type="text" name="user3" maxlength="3" />    //只能寫3個
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    //給指定元素添加一個鍵盤事件，當按鍵釋放時激發自定義函數
    addEvent(get.elements['user1'], 'keyup', tabforward);
    addEvent(get.elements['user2'], 'keyup', tabforward);
    addEvent(get.elements['user3'], 'keyup', tabforward);

    //自定義函數，當用戶輸入到指定位字符後。自動切換焦點
    function tabforward(evt) {   //接收event對象
        //若是不能執行evt，說明是IE瀏覽器就用window.event獲取event對象
        var e = evt || window.event;
        //判斷元素的value長度，若是等於maxlength設置的長度
        if (this.value.length == this.maxLength) {
            //遍歷全部字段
            for (var i = 0; i < get.elements.length; i++) {
                //找到當前字段
                if (get.elements[i] == this) {
                    if (this.maxLength == get.elements.length) {
                        //中途返回
                        return;
                    }
                    //就把焦點移入下一個
                    get.elements[i + 1].focus();
                }
            }
        }
    }
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

三．選擇框腳本

選擇框是經過<select>和<option>元素建立的，除了通用的一些屬性和方法外，HTMLSelectElement類型還提供了以下的屬性和方法：

HTMLSelectElement對象（<select>元素的屬性）

屬性/方法	說明
add(new,rel)	插入新元素，並指定位置
multiple	布爾值，是否容許多項選擇
options	<option>元素的HTMLColletion集合
remove(index)	移除給定位置的選項
selectedIndex	基於0的選中項的索引，若是沒有選中項，則值爲-1
size	選擇框中可見的行數

 

在DOM中，每一個<option>元素都有一個HTMLOptionElement對象，以便訪問數據，這個對象有以下一些屬性：

HTMLOptionElement對象（<option>元素的屬性）

屬性	說明
index	當前選項在options集合中的索引
label	當前選項的標籤
selected	布爾值，表示當前選項是否被選中
text	選項的文本
value	選項的值

options屬性，獲取<select>元素裏的<option>標籤集合
使用方式：
select元素.options
select元素.options[0] 經過下標獲取到集合裏指定的<option>標籤

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    //options屬性，獲取<select>元素裏的<option>標籤集合
    alert(xz.options);
    alert(xz.options[0]); //經過下標獲取到指定的<option>標籤
    alert(xz.options[0].value); //獲取指定<option>標籤裏的value值
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

type屬性，獲取<select>元素是多選仍是單選，返回元素標籤的multiple屬性值
使用方式：
select元素.type

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    //type屬性，獲取<select>元素是多選仍是單選，返回元素標籤的multiple屬性值
    alert(xz.type);
    //select-one  //表示multiple屬性值是單選
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：選擇框裏的type屬性有多是：select-one，也有多是：select-multiple，這取決於HTML代碼中有沒有multiple屬性。

 

獲取選擇框<option>標籤元素的value值和文本

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    //options屬性，獲取<select>元素裏的<option>標籤集合
    //獲取選擇框<option>標籤元素的value值和文本
    alert(xz.options[0].value + xz.options[0].text);
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：操做select時，最好使用HTML DOM，由於全部瀏覽器兼容的很好。而若是使用標準DOM，會由於不一樣的瀏覽器致使不一樣的結果。

PS：當選項沒有value值的時候，IE會返回空字符串，其餘瀏覽器會返回text值。

 

選擇選項
onchange事件，當<select>元素選擇框發生改變時激發函數
使用方式：
<select>元素.onchange = 函數

selectedIndex屬性，獲取<select>元素當前選項的索引位置，若是是多項選擇，他始終返回的是第一個項。
使用方式：
<select>元素.selectedIndex

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    //onchange事件，當<select>元素選擇框發生改變時激發函數
    addEvent(xz, 'change', function () {
        //selectedIndex屬性，獲取<select>元素當前選項的索引位置
        alert(xz.selectedIndex);
        alert(this.options[this.selectedIndex].text);    //獲得當前選項的text值
        alert(this.options[this.selectedIndex].value);    //獲得當前選項的value值
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

selectedIndex屬性還有一個用法，就是給<select>元素定位一個選項

使用方式：

<select>元素.selectedIndex = 選項索引

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    //selectedIndex屬性還有一個用法，就是給<select>元素定位一個選項
    xz.selectedIndex = 2;  //將選擇的第二個索引定位爲默認選項
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

selected屬性，判斷指定的<option>標籤是不是默認選項，返回布爾值，也能夠經過selected = true 設置option當前元素爲默認選項
使用方式：
option元素.selected
option元素.selected = true

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    var sy = xz.options[2]; //獲取第二個<option>元素
    //selected屬性，判斷指定的<option>標籤是不是默認選項，返回布爾值，也能夠經過selected = true 設置option當前元素爲默認選項
    alert(sy.selected); //查看當前<option>標籤是不是默認選項，返回布爾值
    sy.selected = true; //設置當前<option>標籤爲默認選項
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

而selected和selectedIndex在用途上最大的區別是，selected是返回的布爾值，因此通常用於判斷上；而selectedIndex是數值，通常用於設置和獲取。

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    //給<select>標籤添加一個事件，當選項改變時激發函數
    addEvent(xz, 'change', function () {
        //判斷第3個選項被選中時
        if (this.options[2].selected == true) {
            alert('是默認選項！');
        }
    });
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

添加選項

如需動態的添加選項咱們有兩種方案：DOM和Option構造函數。

DOM方式添加選項

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    var option = document.createElement('option');  //建立一個元素節點
    var text = document.createTextNode('北京t');  //建立一個文本節點
    option.appendChild(text); //將文本添加到新建立的元素節點中
    option.setAttribute('value', '北京v');  //設置元素的屬性值
    xz.appendChild(option); //將新建立的元素節點添加到<select>標籤的子元素末尾
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

使用Option構造函數添加選項

Option()構造函數，構造一個<option>標籤元素節點，IE9如下不支持，IE9如下Option()函數構造的<option>標籤元素節點，不支持appendChild()添加，【不推薦appendChild()添加】
使用方式：
變量 = new Option('text值','value值');

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    //Option()構造函數，構造一個<option>標籤元素節點
    var option = new Option('t', '北京v');
    //將構造的<option>標籤元素節點，添加到<select>標籤的子元素末尾
    xz.appendChild(option);     //IE出現bug
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

add()方法,用來添加Option()函數構造的<option>標籤元素節點到<select>標籤裏,第一個參數Option()函數構造變量，參數二要添加的索引位置【推薦】IE9如下也支持
使用方式：
<select>標籤.add(Option()函數構造變量，要添加的索引位置)

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤
    //Option()構造函數，構造一個<option>標籤元素節點
    var option = new Option('自貢t', '自貢v');
    //add()方法,用來添加Option()函數構造的<option>標籤元素節點到<select>標籤裏
    xz.add(option,0); //0，表示添加到第一位
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：在DOM規定，add()中兩個參數是必須的，若是不肯定索引，那麼第二個參數設置null便可，即默認移入最後一個選項。但這是IE中規定第二個參數是可選的，因此設置null表示放入不存在的位置，致使失蹤，爲了兼容性，咱們傳遞undefined便可兼容。

xz.add(option, null);                        //IE不顯示了
xz.add(option, undefined);                    //兼容了

 

移除選項

有三種方式能夠移除某一個選項：DOM移除、remove()方法移除和null移除。

remove()方法，移除<select>標籤裏指定的<option>選項,參數<option>選項的索引位置【推薦】
使用方式：
select標籤.remove(<option>選項的索引位置)

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到<select>標籤

    //removeChild刪除節點裏指定的子節點，獲取<select>標籤裏的指定options傳入方法
    //xz.removeChild(xz.options[0]);                //DOM移除

    //remove()方法，移除<select>標籤裏指定的<option>選項,參數<option>選項的索引位置【推薦】
    xz.remove(3);                            //remove()移除，推薦

    //獲取到<option>選項設置爲null
    //xz.options[0] = null;                        //null移除
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

PS：當第一項移除後，下面的項，往上頂，因此不停的移除第一項，便可所有移除。

 

 

移動選項

若是有兩個選擇框，把第一個選擇框裏的第一項移到第二個選擇框裏，而且第一個選擇框裏的第一項被移除。

// <form id="get" name="rgj">
//     <select name="xz" size="5">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option value="昆明v">昆明t</option>
//     </select>
//     <select name="xz2" size="5">
//         <option>無</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到第一個<select>標籤
    var xz2 = get.elements['xz2'];  //經過name值獲取到第二個<select>標籤
    //給第一個<select>標籤添加一個點擊事件，點擊後激發函數
    addEvent(xz,'click',function () {
        //xz.selectedIndex獲取到第一個<select>標籤的當前選項的索引
        //xz.options[]經過索引獲取到當前選項，將當前選項添加到第二個<select>標籤裏
        xz2.appendChild(xz.options[xz.selectedIndex]);
    })
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

排列選項

選擇框提供了一個index屬性，能夠獲得當前選項的索引值，和selectedIndex的區別是，一個是選擇框對象的調用，一個是選項對象的調用。

index屬性，獲取<option>標籤當前元素的索引
使用方式
option元素.index

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option value="昆明v">昆明t</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到第一個<select>標籤
    alert(xz.options[1].index);
    //返回1
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

排序選項

// <form id="get" name="rgj">
//     <select name="xz">
//         <option value="上海v">上海t</option>
//         <option value="杭州v">杭州t</option>
//         <option value="南京v">南京t</option>
//         <option value="昆明v">昆明t</option>
//     </select>
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var xz = get.elements['xz'];  //經過name值獲取到第一個<select>標籤
    var option = xz.options[1];  //獲取第二個option標籤選項
    //insertBefore將一個節點添加到，指定節點的前面。第一個參數是要添加的節點，第二個參數是要在它以前添加節點的目標節點
    //將第二個節點移動添加到，第一個節點前
    xz.insertBefore(option, xz.options[option.index - 1]);        
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

 

單選按鈕和複選框

checked屬性，判斷指定單選框或複選框是否被選中，返回布爾值
使用方式
指定單選框或複選框元素.checked

// <form id="get" name="rgj">
//     音樂：<input type="checkbox" name="yse" value="5">
//     體育：<input type="checkbox" name="yse" value="6">
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var checkbox = get.elements['yse']; //經過name值獲取到全部的單選框
    alert(checkbox[0].checked);  //判斷指定點選框是否被選中，返回布爾值

    //循環全部單選框，打印出被選中表單的value值
    //根據全部單選框的長度循環次數
    for (var i = 0; i < checkbox.length; i++) {            //循環單選按鈕
        //判斷每次循環到的單選框checked屬性等於true，就表示此單選框被選中
        if (checkbox[i].checked == true) {            //遍歷每個找出選中的那個
            //打印出被選中的單選框的value值
            alert(checkbox[i].value);                //獲得值
        }
    }
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}

defaultChecked屬性，判斷指定單選框或複選框是不是被默認選中，它獲取的是本來HTML的默認選中checked屬性值，而不會由於點擊而改變。
使用方式：
指定單選框或複選框元素.defaultChecked

// <form id="get" name="rgj">
//     音樂：<input type="checkbox" name="yse" value="5">
//     體育：<input type="checkbox" name="yse" value="6">
// </form>

//添加事件當頁面加載完成後激發函數
addEvent(window, 'load', function () {
    var get = document.getElementById('get');  //經過ID獲取到form標籤
    //elements屬性，獲取表單form元素裏的表單字段，返回表單字段集合，後面能夠跟字段下標，獲取指定字段，也能夠跟name值獲取指定字段
    var checkbox = get.elements['yse']; //經過name值獲取到全部的單選框
    alert(checkbox[0].defaultChecked); //判斷單選框是否爲默認選擇
});

//跨瀏覽器添加事件，添加事件兼容
function addEvent(obj, type, fn) {     //添加事件函數，接收3個參數，1事件對象，2事件名稱，3事件函數
    //判斷瀏覽器若是支持w3c
    if (obj.addEventListener) {
        //就用w3c的addEventListener方法添加對象，將事件名稱和事件函數傳入添加事件
        obj.addEventListener(type, fn, false);
    } else if (obj.attachEvent) {   //判斷若是瀏覽器是IE9如下，就用IE的方法attachEvent添加事件
        //將事件名稱和事件函數傳入建立對象
        obj.attachEvent('on' + type, fn);
    }
}