js014-表单脚本

属性/方法

说明

acceptCharset

服务器能够处理的字符集；等价于HTML的accept-cahrset特性

action

接受请求的URL；等价于HTML的action特性

elements

表单中所有控件的集合（HTMLCollection）

enctype

请求的编码类型；等价于HTML的enctype特性

length

表单中控件的数量

method

要发送的HTTP类型，通常时“get”或“set”；等价于HTML的method特性

name

表单的名称；等价于HTML的name特性

reset()

将所有表单域重置为默认值

submit()

提交表单

target

用于发送请求和接收相应的窗口名称等价于HTML的target特性

通用提交按钮

<input
type="submit" value="submit form"/>

自定义提交按钮

<button
type="submit">submit form</button>

图像提交按钮

<input
type="image" src="graphic.gif" />

var form =
document.getElementById("myform");

EventUtil.addHandler(form,
"submit", function(event){

//取得事件对象

event = EventUtil.getEvent(event);

//阻止默认事件

EventUtil.preventDefault(event);

});

var form =
document.getElementById("myform");

//提交表单

form.submit();

通用重置按钮

<input
type="reset" value="submit form"/>

自定义重置按钮

<button
type="reset">submit form</button>

var form =
document.getElementById("myform");

EventUtil.addHandler(form,
"reset", function(event){

//取得事件对象

event = EventUtil.getEvent(event);

//阻止默认事件

EventUtil.preventDefault(event);

});

var form =
document.getElementById("myform");

//提交表单

form.reset();

var form =
document.getElementById("myform");

//取得表单中的第一个字段

var  field1 = form.elements[0];

//取得名为textbox的字段

var field2 =
form.elements[textbox];

//取得表单中包含的字段的数量

var fieldCount =
form.elements.length;

属性

说明

disabled

布尔值，表示当前字段是否禁用

form

指向当前字段所属表单的指针，只读

name

当前字段的名称

readOnly

布尔值，表示当前字段是否只读

tabIndex

表示当前字段的切换（tab）序号

type

表示当前字段类型，如“checkbox”“radio”等

value

当前字段被提交个服务器的值。只读

focus()

用于将浏览器焦点设置到表单字段，，即激活表单字段，使其可以相应键盘事件

blur()

用于从元素中移走焦点

事件

触发条件

blur

当前字段失去焦点时

change

对于<input><textarea>元素，在他们拾取焦点且value值发生改变时触发，对于<slelect>元素，在其改变选项是触发

focus

当前字段获得焦点时触发

<input>

单行文本框。type = “text”，size指定文本框中能够显示的字符数，value特性设置文本框初始值，maxlength特性指定文本框可以接收的最大字符数。如

<input
type="text" size="25" maxlength="50" value="
initial value "/>

<textarea>

多行文本框。rows和cols特性指定文本框的字符行数和列数（与input的size类似），初始值必须放在<textarea>和</textarea>之间

如：

<textarea rows="25"
cols="5">initial value</textarea>

var textbox =
document.form[0].elements["textbox1"];

EventUtil.addHandler(textbox,
"slecte", function(event){

var alert("text slected" +
textbox.value);

});

function
getSelectedTxet(textbox){

return
textbox.value.substring(textbox.selectionStart, textbox.selectionEnd)

}

textbox.value =
"Hello word !";

//选择所有文本

textbox.setSelectionRange(0,
textbox.value.length);//"Hello word !"

//选择前3个字符

textbox.setSelectionRange(0,
3);//"Hel"

//选择第4到第6个字符

textbox.setSelectionRange(4,
6);//"o w"

EventUtil.addHandler(textbox,
"keypress",function(event){

event = EventUtil.getEvent(event);

EventUtil.preventDefault(event);

});

EventUtil.addHandler(textbox,
"keypress",function(event){

event = EventUtil.getEvent(event);

var targe = EventUtil.getTarget(event);

var cahrCode =
EventUtil.getCharCode(cahrCode);

if
(!/\d/.text(String.formCharCode(cahrCode))) {

EventUtil.preventDefault(event);

};

});

事件

触发场景

boforecopy

在发生复制操作前触发

copy

在发生复制操作时触发

beforecut

在发生剪切操作前触发

cut

在发生剪切操作时触发

beforepaste

在发生黏贴操作前触发

paste

在发生黏贴操作时触发

//自动切换焦点

(function(){

function tabForwafd(event){

event =
EventUtil.getEvent(event);

var target =
EventUtil.getTarget(event);

if (target.value.length ==
target.maxLength) {

var form = target.form;

for (var i = 0; len =
form.elements.length; i <len; i++) {

if
(form.elements[i+1]) {

form.elements[i+1].focus();

}

return;

}

}

}

var textbox1 =
document.getElementById("texttel1");

var textbox2 = document.getElementById("texttel2");

var textbox3 =
document.getElementById("texttel3");

EventUtil.addHandler(textbox1,
"keyup", tabForwafd);

EventUtil.addHandler(textbox2,
"keyup", tabForwafd);

EventUtil.addHandler(textbox3,
"keyup", tabForwafd);

})

<input
type="submit" value="submit form" required/>

<input
type="email" name="email" />

<input
type="url" name="homepage" />

<input
type="nember" min="0" max="100"
step="5" name="count" />

<input
type="text" pattern="\d+" name="count" />