js014-表单脚本

Posted 2020-06-09

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属性可以告诉表单不进行验证。