js 表单
浏览数：21 /
时间：2015年06月09日
1. 提交表单
提交按钮
<input type=‘submit‘>
<button
type=‘submit‘></buttton>
<input type=‘image‘
src=‘qq.png‘>
只要表单中存在上面的任何一种按钮，点击按钮或者按回车键就可以提交该表单。（textarea例外，在文本区中回车会换行）。
以这种方式提交表单，浏览器在将请求发送给服务器之前触发
submit 事件，这样我们就有机会验证表单数据。
form.submit(); 也可以提交表单，但不会触发 submit
事件。
2.重置表单
<input type=‘reset‘>
<button
type=‘reset‘></button>
3. 表单字段
可以像访问页面中的其他元素一样，使用原生 DOM 方法访问表单元素。此外，每个表单都有
elements 属性，该属性是表单中所有元素的集合。
每个表单字段在 elements 集合中的顺序，与它们出出在标记中的顺序相同，可以按照位置和
name 特性来访问它们。
var field1 = form.elements[0];
// 取得表单中的第一个字段
var field2 =
form.elements[‘textbox1‘]; //取得表单中 name 为 ‘textbox1‘
的字段，如果多个表单控件使用同一个 name, 就会返回一个 NodeList 。
var fieldCount = form.elements.length;
//取得表单中包含字段的数量
共有的表单字段属性
disabled :
布尔值，表示当前字段是否被禁用。
form :
指向当前字段所属表单的指针，只读。
name :
当前字段的名称。
readOnly :
布尔值，表示当前字段是否只读。
tabIndex :
表示当前字段的切换（tab）序号。
type :
当前字段的类型。
value :
当前字段将被提交经服务器的值。
* 除了 form 属性之外，可以通过
js 动态修改其他任何属性。
共有的表单方法
focus() 和
blur()
HTML5 为表单字段新增了一个
autofocus 属性。只要设置这个属性，不用 js 就能自动把焦点移动到相应字段。例如：
<input
type=‘text‘ autofocus>
*
在默认情况下，只有表单字段可以获取焦点。对于其他元素而言，如果先将其 tabIndex 属性设置为－1，然后再调用 focus() 方法，也可以
这些元素获得焦点。只有 Opera 不支持这种持术。
共有的表单事件
blur :
当前字段失去焦点时触发。
change
: 对于 <input>和<textarea>元素，在它们失去焦点且 value
值改变时触发；对于<select>元素，在其选项改变时触发。
focus :
当前字段获得焦点时触发。
4. 文本框
<input type=‘text‘ size=‘25‘ maxlength=‘50‘
value=‘initial value‘ required>
能够显示25个字符，输入最多50个字符，必填
<textarea rows=‘25‘ cols=‘5‘>initial
value</textarea>
能够显示25行，5列
选择文本框
input.select(); 会触发 select 事件
取得所选的文本
textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
选择部分文本 textbox.setSelectionRange(0,5);
//
如果看不到效果，让文本框获得焦点
过滤输入
1 $(‘input‘).keypress(function(event){ 2 console.log(event.keyCode); 3 var str = String.fromCharCode(event.keyCode); 4 if(str == ‘m‘){ 5 event.preventDefault(); 6 } 7 });
5. 选择文本框
选择文本框是通过<select> 和 <option>
元素创建的
选择框“私有”属性和方法：
add(newOption,
relOpton) : 向控件中插入新<option>元素，其位置在相关项（relOption）之前。
multiple :
布尔值，表示是否允许多项选择；
options :
控件中的所有<option> 元素的集合。
remove(index) :
移除给定位置的选项。
selectedIndex : 基于 0
的选中项的索引，如果没有选中项，则值为 －1，对于支持多选的控件，只保存选中项第一项的索引。
size :
选择框中可见的行数。
选择框共有属性：
type : ‘select-one‘
或 ‘select-multiple’
value : 没有选中项，value
为空；有一个选中项，value 等于选中项的 value ; 有多个选中项，取第一个选中项的值；选中项没有 value, 选择框的
value
等于该项的文本。
option 属性 ：
index : 当前选项在
options 集合中的索引。
selected : 布尔值，
表示当前项是否被选中。将这个属性设置为 true 可以选中当前选项。
text : 选项的文本。
value : 选项的值。
添加选项：
var newOption = new
Option(‘Option text‘, ‘Option value‘);
selectbox.add(newOPtion, relOpton);
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
