讀書時間《JavaScript高級程序設計》七：表單

　　　 在HTML中表單是有<form>元素表示，在JS中表單對應的是HTMLFormElement類型。

　　　表單自有的屬性和方法：

　　　獲取表單

　　　1. 經過ID  document.getElementById

　　　2. 經過 document.forms 獲取表單集合 在經過索引值或者name值獲取具體表單元素

　　　提交表單

 　　  使用input 或者 button 能夠定義提交按鈕，將其type設置爲 submit。

<input type="submit"  value="提交" />
<button type="button">提交</button>
<input type="image" src="button.png" />

　　　當表單中有提交按鈕，在表單控件擁有焦點時，按下Enter鍵就能夠提交表單（textarea例外）。而且在提交表單時會觸發submit事件。　

var form = document.getElementById('myForm');

form.addEventListener('submit', function(e){
    // 阻止提交
    e.preventDefault();
});

// 提交表示
form.submit();

　　　重置表單

　　　點擊表單重置按鈕時，表單會重置。設置input或者button的type爲reset。

<input type="reset" value="重置" />
<button type="reset">重置</button>

　　　重置表單會觸發reset事件。

var form = document.getElementById('myForm');

form.addEventListener('reset', function(e){
    // 取消重置
    e.preventDefault();
});

// 重置表單
form.reset();

　　　  表單字段

　　　　每一個表單都有elements屬性，這個屬性是表單中全部元素的集合。這個集合是個有序的列表，其中包含表單中全部的字段。能夠經過每一個字段在集合中的位置和name訪問。　　

// 獲取表單
var form = document.getElementById('myForm');

// 獲取表單的第一個字段
var frist = form.elements[0];

// 獲取名爲username的字段
var username = form.elements['username'];

　　　表單元素擁有一些共有的屬性：

 　　　表單元素共有的方法：　

window.onload = function(){
    // 第一個表單中的第一個元素獲取焦點
    document.forms[0].elements[0].focus();
};

　　　 注：若是第一個表單元素是一個input元素而且type值爲hidden， 或使用css的display和visibility隱藏了改元素，focus會致使錯誤。　

 　　　文本框　　

 　　　單行文本框：input元素

　　　 多行文本框： textarea元素

<!-- 文本框可以顯示25個字符 輸入不超過50個字符 -->
<input type="text" size="25" maxlength="50" value="" />

<!-- 文本框顯示 10行 30列(字符數列) -->
<textarea rows="10" cols="30"></textarea>

　　　　選擇文本　

<input type="text" value="呵呵，這是一個表情。">

window.onload = function() {
    var input = document.forms[0].elements[0];
    input.select();
    input.addEventListener('select', function() {
        // 選擇了什麼文本 - HTML5 API
        console.log( input.value.substring(input.selectionStart, input.selectionEnd) )

    });
};

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();
}

 。。。