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

posted @ 2016-01-25 22:08  liaoali  阅读(385)  评论(0编辑  收藏  举报