标签:c style class blog code java
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);
js 表单,布布扣,bubuko.com
js 表单
标签:c style class blog code java
原文地址:http://www.cnblogs.com/bdyl/p/3762369.html