JavaScript 表单脚本

JavaScript 表单脚本

一、基本概念

    HTML中表单<form>对应JS的是HTMLFormElement类型，具有HTML元素的默认属性，也有以下特有的属性和方法：

acceptCharset、action、elements、enctype、length、method、name、target这几个属性都对应表单的特性，

    可以通过document.forms取得页面中所有的表单，如forms[0]或者forms["表单名"]

    1、提交表单

        以下提交表单按钮，回车键即可提交

<input type="submit"  value="Sbumit Form">  //通用提交按钮
<button type="submit">Submit Form</button>   //自定义提交按钮
<input type="image"  src="1.gif">     //图像按钮

    在JS中，可通过EventUtil.preventDefault(event)来阻止表单提交，也可通过form.submit()提交表单。

2、重置表单

    重置按钮时，所有表单字段都会恢复到页面刚加载完毕时的初始值，可通过JS的form.reset()方法，也可通过以下HTML代码。

<input type="reset" value="Reset Form">    //通用重置按钮
<button type="reset">Reset Form</button>    //自定义重置按钮

3、表单字段

    1、共有表单字段属性

每个表单都有 elements属性，表单中所有元素按标记顺序在elements集合中，可通过form.elements[0]或者form.elements["元素名"]来访问相应的表单字段。表单字段共有的属性和方法如下：

    disabled：当前字段是否被禁用      form:字段所属表单指针   name：字段名称    readOnly:只读    tabIndex：字段切换序号   type：字段类型    value:字段提交给服务器的值

var field = form.elements[0];    //取得第一个字段
field.type = "checkbox";   //修改字段值

    2、共有表单字段方法

focus()——将焦点设置到表单字段。可通过element.focus()调用。

blur()——从元素中移走。例子：创建只读字段。此方法不常用。

3、共有表单字段事件

1、blur事件：当前字段失去焦点时触发

2、focus事件：获得焦点时触发

3、change事件：对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value值改变时，才会触发change事件。对于<select>元素，只 要用户选择了不同的选项，就会触发change事件。change事件常用于验证用户输入

二、文本框脚本

1、单行文本框：

<input type="text" size="显示字符数" maxlength="接收字符数" value="默认值">  

2、多行文本框：

<textarea rows="行数" cols="列数">initial value</textarea>

    1、选择文本

1、选择文本：select()——在文本框获得焦点时选择其所有文本，此时会触发select事件。

2、获取选择文本：value.substring(textbox.selectionStart，textbox.selectionEnd)：文本区开头和结尾的偏移量。

3、选择部分文本：setSelectionRange(0,3)方法 ：两个参数：范围起始和截止的索引。

    2、过滤输入

1、屏蔽字符：若要屏蔽特定的字符，则需要检测keypress事件对应的字符编码。

EventUtil.addHandler(textbox,"keypress",function(event){  //创建事件句柄
    event = EventUtil.getEvent(event);    //获取事件
    var target = EventUtil.getTarget(event);    //获取目标
    var charCode = EventUtil.getCharCode(event);    //获取字符编码

    if(!/\d/.text(String.fromCharCode(charCode))){//字符编码转成字符串，确定输入的是否是数值
        EventUtil.preventDefault(event);  
    }
})

2、操作剪切板

beforecopy事件：复制之前触发      copy事件：复制时触发      

beforecut事件：剪切之前触发         cut事件：剪切时触发

beforepaste事件：粘贴之前触发     paste事件：粘贴时触发

可以使用clipboardDate对象访问剪切板中的数据，例：event.cliboardData(IE中是window.cliboradData)，此对象有以下三个方法：

1、getData()：获取数据，参数为数据类型，支持MIME类型（IE支持text或URL）

2、setData()：接收两个参数，第一个为数据类型，第二个为要放在剪贴板中的文本

3、clearData()：清除剪切板的数据

3、HTML5约束验证API

   1、必填字段

<input type="text" name="username" required>   //在input内输入required,提交时数据非空

var Username=document.forms[0].elements["username"].required;  //使用required属性使数据非空

 2、其他输入类型

<input type="email" name="email">    //验证输入为email类型
<input type="url" name="homepage">   //输入为URL类型

input.type="email";     //也可以使用JS验证输入类型

3、数值范围

    HTML5还定义了"number"、"range"、"datetime"、"datetime"、"local"、"date"、"month"、"week"、"time"这几个输入元素，拥有三个属性：min最小值、max最大值、step公因数。

<input type="number" min="0" max="100" step="5" name="count">  //输入只能以5的倍数

4、输入模式

    文本字段有一个pattern属性，用于匹配文本框中的值

var pattern=document.forms[0].elements["count"].pattern;  //访问pattern属性

5、检测有效性

    用checkValidity()方法判断表单中的字段是否符合以上的约束，符合则返回true。

if(document.forms[0].elements[0].checkValidity()){
    //字段有效时，执行此代码
}

    validity属性告诉你为什么字段有效或无效

customError：设置了 setCustomValidity()则返回true      patternMismatch：值与pattern属性不匹配则返回true

rangeOverflow：值比max值大则返回true    rangeUnderflow：值比min值小则返回true    stepMisMatch：步进不合理则返回true

tooLong：值超过了maxlength则返回true    typeMismatch：值不是"mail"或"url"则返回true   

6、禁用验证

    设置novalidata属性可以使表单不进行验证，可以用HTML标签特性或者JS属性设置

三、选择框脚本

    通过<select>和<option>元素创建选择框，独立拥有以下属性和方法

add(newOption,relOption)：在relOption前插入newOption    multiple：是否允许多项选择    options：中所有<option>元素的 HTMLCollection    remove(0):移出位置选项    size：对应HTMLsize特性   

1、选择选项

    使用选择框的selectedIndex 属性访问选中项

var selectedOption=selectbox.options[selectbox.selectedIndex];  //获取选中项

2、添加选项

1、使用JS动态创建选项

var newOption = document.createElement("option");    //创建option元素
newOption.appendChild(document.createTextNode("Option text"));   //添加文本节点
newOption.setAttrivute("value","Option vale");    //设置value
selectbox.appendChild(newOption);    

2、使用Opiton构造函数，接收两个参数： 文本（text）和值（value）

var newOption=new Option("Option text","Option value");  //创建新option

3、使用选择框的add()方法：接收两个参数：要添加的选项和在谁之前添加

var newOption = new Option("Option text","Option value");
selectbox.add(newOption.undefined);  //此为最佳方案

3、移除选项

1、移除单个选项，可以使用以下三种方法

selectbox.removeChild(selectbox.options[0]);

selectbox.remove(0);

selectbox.options[0]=null;

2、用迭代清除选项框中所有的选项

function clearSelectbox(selectbox){
    for(var i=0,len=selectbox.options.length;i<len;i++){
        selectbox.remove(i);
    }
}

4、重排选项

var optionToMove=selectbox.options[1];
selectbox.insertBefore{optionToMove,selectbox.options[optionToMove.index-1]};

4、富文本编辑

    在页面中嵌入一个包含空HTML页面的iframe就可以创建富文本编辑，可以使用以下方法：

EventUtil.addHandler(window,"load",function(){
    frames["richedit"].document.designNode="on";
)};

1、使用contenteditable属性：给任何元素添加此属性，就可以编辑此元素。

<div class="editable" id="richedit" contenteditable>  </div>   //HTML方法
div.contentEditable="true";    //JS方法

2、操作富文本

    使用document.execCommand()方法可以对文档执行预定义的命令。此方法接收3个参数：要执行的命令名称、是否为当前命令提供用户界面（常用false），执行命令必须的一个值（如果不需要值，则传递null）。

frames["richedit"].document.execCommand("bold",false,null);   //转换粗体文本
frames["richedit"].document.execCommand("createlink",false,"URL")    //创建链接

    queryCommandEnabled()方法检测是否允许执行传入的命令，允许则返回true，参数要检测的命令。

    queryCommandState()方法用于确定指定命令是否已应用到了选择的文本。

    queryCommandValue()方法用于取得document.execCommand()的第三个参数。

3、富文本选区

     使用框架（iframe）的getSelection()方法，可以确定实际选择的文本。会返回一个Selection对象，拥有下列方法。

　addRange(range)：将指定的DOM范围添加到选区中     collapse(node，offset)：将选区折叠到指定文本偏移位置

    collapseToEnd()：将选区折叠到终点    collapseToStart()：将选区折叠到起点    containsNode(node)：确定指定的节点是否在选区中    deleteFromDocument()：删除选区中的文本     getRangeAt(index)：返回索引对应的选区中的DOM范围  removeAllRanges()：从选区中移除所有DOM范围      reomveRange(range)：从选区中移除 指定的DOM范围  selectAllChildren(node)：清除选区并选择所有子节点    toString()：返回选区所包含的文本内容