js014-表单脚本

js014-表单脚本

本章内容：
理解表单

文本框验证与交互

使用其他表单控制

14.1 表单的基础知识

在HTML中，表单时由<form>元素来表示的，在JS中，表单对应的时HTMLFormElement类型。HTMLFormElement继承了HTMLElement，所以它与其他HTML元素具有想的的默认属性。它还有自己独特的属性和方法：

属性/方法	说明
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特性

取得<form>元素引用的方式有很多，最常用的是：getElementBId()

var form =
document.getElementBId("lal-Alice"); 
//取得<form>元素的引用

14.1.1 提交表单

用户单击提交按钮或图像按钮时，就会提交表单，使用<input>或<button>都可以定义提交表单。只要将type特性值设置为“submit”即可。图像按钮是将<input>的type值设为“image”来定义的。

通用提交按钮	<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);

});

只要表单中有提交按钮，在相应表单空间拥有焦点的情况下，只要打回车键就可以提交表单（textarea是一个例外，在文本区中打回车会换行）。如果表单里没有提交按钮，回车不会提交表单。

在JS中以编程方式调用submit()方法也可以提交表单，而且这种方式无需包含表单提交按钮，任何时候都可以提交表单。

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

//提交表单

form.submit();

14.1.2 重置表单

type特性值为：reset的<input>或<button>都可以创建重置按钮。如下

通用重置按钮	<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);

});

在JS中以编程方式调用reset()方法也可以提交表单，而且这种方式无需包含表单提交按钮，任何时候都可以提交表单。

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

//提交表单

form.reset();

14.1.3 表单字段

每个表单都包含有elements属性，该属性是表单中所有表单元素的结合，这个elements集合是一个有序列表，其中包含着表单中的所有字段，例如<input>、<textarea>、<button>、<fieldset>。每个表单字段在elements集合中的顺序与他们出现在标记中的顺序相同，可以按照位置和name特性来访问它们。

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

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

var  field1 = form.elements[0];

//取得名为textbox的字段

var field2 =
form.elements[textbox];

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

var fieldCount =
form.elements.length;

1、共有的表单字段属性

除了<fieldset>以外，所有的表单字段都拥有形同的一组属性。因为<input>类型可以表示多种表单字段，所以有些属性只适用于某些字段，但是还有一些是共用的。共用的表单字段属性如下：

属性	说明
disabled	布尔值，表示当前字段是否禁用
form	指向当前字段所属表单的指针，只读
name	当前字段的名称
readOnly	布尔值，表示当前字段是否只读
tabIndex	表示当前字段的切换（tab）序号
type	表示当前字段类型，如“checkbox”“radio”等
value	当前字段被提交个服务器的值。只读

除form属性以外，可以通过JS修改其他任何属性

除了<fieldset>以外，所有的表单字段都拥有type属性

2、共有表单的字段方法

每个表单字段都有两个方法：

focus()	用于将浏览器焦点设置到表单字段，，即激活表单字段，使其可以相应键盘事件
blur()	用于从元素中移走焦点

3、共有的表单字段事件

除了支持鼠标、键盘、更改和HTML事件之外，所有表单字段都支持下列3个事件：

事件	触发条件
blur	当前字段失去焦点时
change	对于<input><textarea>元素，在他们拾取焦点且value值发生改变时触发，对于<slelect>元素，在其改变选项是触发
focus	当前字段获得焦点时触发

14.2 文本框脚本

两种文本框：

<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>

不要使用setAttribute()设置<input>元素的value特性，也不要去修改<textarea>元素的第一个子节点。原因：对value属性修改，不一定会反映在DOM中，所以处理文本框时最好不要使用DOM 方法。

14.2.1 选择文本

以上两种文本都支持select()方法，该方法用于选择文本框中所有文本。不接受参数。可以在任何时候被调用。

1、选择（select）事件

在选择文本框是，就会触发select事件。在调用select()方法是也会触发select事件：

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

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

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

});

2、取得选择的文本

添加两个属性：selectionStart和selectionEnd。这两个属性中保存的是基于0的数值，表示文本的范围（开头和结尾的偏移量）

function
getSelectedTxet(textbox){

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

}

3、选择部分文本

setSelectionRange()方法。除了select()方法之外，所有的文本框都有一个setSelectionRange()方法，接收两个参数：选择第一个字符的索引和要选择的

一个祖父之后的字符的索引。

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"

14.2.2 过滤输入

1、屏蔽字符

通过代码屏蔽所有按键操作

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

};

});

2、操作剪贴板

以下为6个剪贴板事件：

事件	触发场景
boforecopy	在发生复制操作前触发
copy	在发生复制操作时触发
beforecut	在发生剪切操作前触发
cut	在发生剪切操作时触发
beforepaste	在发生黏贴操作前触发
paste	在发生黏贴操作时触发

14.2.3 自动切换焦点

//自动切换焦点

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

})

14.2.4 HTML5约束验证API

1、必填字段

指定required属性

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

2、其他输入类型

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

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

3、数值范围

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

4、输入模式

新增了pattern属性，该属性是一个正则表达式，用于匹配文本框中的值

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

5、检测有效性

checkValidity()方法可以检测表单中某个字段是否有效。

6、禁用验证

通过设置novalidate属性可以告诉表单不进行验证。

声明：该博客由http://www.cnblogs.com/lal-fighting/原创发表，未经作者允许，不得私自转载抄袭！！！