读书时间《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'];

　　　表单元素拥有一些共有的属性：

读书时间《JavaScript高级程序设计》七：表单

　　　表单元素共有的方法：　读书时间《JavaScript高级程序设计》七：表单

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

}

。。。

秒客网

读书时间《JavaScript高级程序设计》七：表单

相关文章