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/p/5158876.html
