读书时间《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();
}

。。。