JS高程3：表单脚本

时间 2019-11-16

标签高程表单脚本栏目 JavaScript 繁體版

原文原文链接

HTML和CSS对表单的操做仍是比较乏力的，在表单操做中，JS势必会使用到。正则表达式

基础知识
文本框
选择框
序列化
富文本编辑器

基础知识编程

HTMLFormElement接口能够建立或者修改<form>对象;它继承了HTMLElement接口的方法和属性。浏览器

常见的方法和属性：服务器

HTMLFormElement.acceptCharset编辑器

至关于HTML中的accept-charset属性，包含服务器可以接受的字符编码列表。函数

HTMLFormElement.action
至关于HTML中的action属性，接收请求的URL。

HTMLFormElement.elements只读
表单中全部控件的集合（HTMLFormControlsCollection）。

HTMLFormElement.enctype
至关于HTML中的enctype属性，请求编码的类型。

HTMLFormElement.length 只读
表单中控件的数量。

HTMLFormElement.method
至关于HTML中的method属性，HTTP请求的类型。

HTMLFormElement.name
至关于HTML中的name属性，表单的名称。

HTMLFormElement.target
至关于HTML中的target的属性，用于发送请求和接收响应的窗口名称。
HTMLFormElement.submit()
提交表单到服务器。

HTMLFormElement.reset()
将表单域重置为默认。

更详细的内容请访问：https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLFormElementpost

获取<form>元素的方式有多种，其中最多见的是getElementById()方法：测试

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

其次，能够经过document.forms取得全部表单，而后经过数值索引或者name值来获取特定的表单：编码

var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单

提交表单spa

用户点击提交按钮或者图像按钮时，就会提交表单。使用<input>或者<button>元素均可以自定义提交按钮。

元素的type属性值要设置为“submit”，图像按钮设置为“image”：

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

在表单控件拥有焦点的状况下，按回车键就能提交表单（textarea是个例外，在文本中回车会换行）。

浏览器会在将请求发送给服务器以前触发 submit 事件。这样，咱们就有
机会验证表单数据，并据以决定是否容许表单提交。阻止这个事件的默认行为就能够取消表单提交。例
如，下列代码会阻止表单提交：

var form = document.getElementById("myForm"); EventUtil.addHandler(form, "submit", function(event){ //取得事件对象
event = EventUtil.getEvent(event); //阻止默认事件
EventUtil.preventDefault(event); });

这里使用了EventUtil 对象，以便跨浏览器处理事件。调用 prevetnDefault()
方法阻止了表单提交。通常来讲，在表单数据无效而不能发送给服务器时，可使用这一技术。

在 JavaScript 中，以编程方式调用 submit()方法也能够提交表单。并且，这种方式无需表单包含
提交按钮，任什么时候候均可以正常提交表单。来看一个例子：

var form = document.getElementById("myForm"); //提交表单
form.submit();

在以调用 submit()方法的形式提交表单时，不会触发 submit 事件，所以要记得在调用此方法之
前先验证表单数据。

提交表单时可能出现的最大问题，就是重复提交表单。在第一次提交表单后，若是长时间没有反
应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果每每很麻烦（由于服务器
要处理重复的请求），或者会形成错误（若是用户是下订单，那么可能会多订好几份）。解决这一问题
的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用 onsubmit 事件处理程序取消后续的
表单提交操做。

重置表单

在用户单击重置按钮时，表单会被重置。使用 type 特性值为"reset"的<input>或<button>都
能够建立重置按钮，以下面的例子所示：

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

这两个按钮均可以用来重置表单。在重置表单时，全部表单字段都会恢复到页面刚加载完毕时的初
始值。若是某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。
用户单击重置按钮重置表单时，会触发 reset 事件。利用这个机会，咱们能够在必要时取消重置
操做。例如，下面展现了阻止重置表单的代码：

var form = document.getElementById("myForm"); EventUtil.addHandler(form, "reset", function(event){ //取得事件对象
event = EventUtil.getEvent(event); //阻止表单重置
EventUtil.preventDefault(event); }); 与提交表单同样，也能够经过 JavaScript 来重置表单，以下面的例子所示。 var form = document.getElementById("myForm"); //重置表单
form.reset();

与调用 submit()方法不一样，调用 reset()方法会像单击重置按钮同样触发 reset 事件。

在 Web 表单设计中，重置表单一般意味着对已经填写的数据不满意。重置表单
常常会致使用户摸不着头脑，若是意外地触发了表单重置事件，那么用户甚至会很恼
火。事实上，重置表单的需求是不多见的。更常见的作法是提供一个取消按钮，让用
户可以回到前一个页面，而不是不分青红皂白地重置表单中的全部值。

表单字段

能够像访问页面中的其余元素同样，使用原生 DOM 方法访问表单元素。此外，每一个表单都有 elements 属性，

该属性是表单中全部表单元素（字段）的集合。这个 elements 集合是一个有序列表，
其中包含着表单中的全部字段，例如<input>、 <textarea>、 <button>和<fieldset>。每一个表单字
段在 elements 集合中的顺序，与它们出如今标记中的顺序相同，能够按照位置和 name 特性来访问它
们。下面来看一个例子：

var form = document.getElementById("form1"); //取得表单中的第一个字段
var field1 = form.elements[0]; //取得名为"textbox1"的字段
var field2 = form.elements["textbox1"]; //取得表单中包含的字段的数量
var fieldCount = form.elements.length;

若是有多个表单控件都在使用一个 name（如单选按钮），那么就会返回以该 name 命名的一个
NodeList。例如，如下面的 HTML 代码片断为例：

<form method="post" id="myForm">
<ul>
<li><input type="radio" name="color" value="red">Red</li>
<li><input type="radio" name="color" value="green">Green</li>
<li><input type="radio" name="color" value="blue">Blue</li>
</ul>
</form>

在这个 HTML 表单中，有 3 个单选按钮，它们的 name 都是"color"，意味着这 3 个字段是一块儿的。
在访问 elements["color"]时，就会返回一个 NodeList，其中包含这 3 个元素；不过，若是访问
elements[0]，则只会返回第一个元素。来看下面的例子：

var form = document.getElementById("myForm"); var colorFields = form.elements["color"]; alert(colorFields.length); //3
var firstColorField = colorFields[0]; var firstFormField = form.elements[0]; alert(firstColorField === firstFormField); //true

以上代码显示，经过 form.elements[0]访问到的第一个表单字段，与包含在 form.elements
["color"]中的第一个元素相同。

也能够经过访问表单的属性来访问元素，例如 form[0]能够取得第一个表单字 段，而 form["color"]则能够取得第一个命名字段。这些属性与经过 elements 集 合访问到的元素是相同的。可是，咱们应该尽量使用 elements，经过表单属性访 问元素只是为了与旧浏览器向后兼容而保留的一种过渡方式。

1.共有的表单字段属性

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

 disabled：布尔值，表示当前字段是否被禁用。  form：指向当前字段所属表单的指针；只读。  name：当前字段的名称。  readOnly：布尔值，表示当前字段是否只读。  tabIndex：表示当前字段的切换（tab）序号。  type：当前字段的类型，如"checkbox"、 "radio"，等等。  value：当前字段将被提交给服务器的值。对文件字段来讲，这个属性是只读的，包含着文件 在计算机中的路径。

除了 form 属性以外，能够经过 JavaScript 动态修改其余任何属性。来看下面的例子：

var form = document.getElementById("myForm"); var field = form.elements[0]; //修改 value 属性
field.value = "Another value"; //检查 form 属性的值
alert(field.form === form); //true //把焦点设置到当前字段
field.focus(); //禁用当前字段
field.disabled = true; //修改 type 属性（不推荐，但对<input>来讲是可行的）
field.type = "checkbox";

可以动态修改表单字段属性，意味着咱们能够在任什么时候候，以任何方式来动态操做表单。例如，很
多用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：由于会致使费用翻番。
为此，最多见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件
发生时禁用提交按钮便可。如下就是这样一个例子：

//避免屡次提交表单
EventUtil.addHandler(form, "submit", function(event){ event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); //取得提交按钮
var btn = target.elements["submit-btn"]; //禁用它
btn.disabled = true; });

以上代码为表单的 submit 事件添加了一个事件处理程序。事件触发后，代码取得了提交按钮
并将其 disabled 属性设置为 true。注意，不能经过 onclick 事件处理程序来实现这个功能，原
因是不一样浏览器之间存在“时差”：有的浏览器会在触发表单的 submit 事件以前触发 click 事件，
而有的浏览器则相反。对于先触发 click 事件的浏览器，意味着会在提交发生以前禁用按钮，结果
永远都不会提交表单。所以，最好是经过 submit 事件来禁用提交按钮。不过，这种方式不适合表
单中不包含提交按钮的状况；如前所述，只有在包含提交按钮的状况下，才有可能触发表单的 submit
事件。

除了<fieldset>以外，全部表单字段都有 type 属性。对于<input>元素，这个值等于 HTML 特
性 type 的值。对于其余元素，这个 type 属性的值以下表所列：

此外， <input>和<button>元素的 type 属性是能够动态修改的，而<select>元素的 type 属性
则是只读的。

2.共有的表单字段方法

每一个表单字段都有两个方法： focus()和 blur()。其中， focus()方法用于将浏览器的焦点设置
到表单字段，即激活表单字段，使其能够响应键盘事件。例如，接收到焦点的文本框会显示插入符号，
随时能够接收输入。使用 focus()方法，能够将用户的注意力吸引到页面中的某个部位。例如，在页面
加载完毕后，将焦点转移到表单中的第一个字段。为此，能够侦听页面的 load 事件，并在该事件发生
时在表单的第一个字段上调用 focus()方法，以下面的例子所示：

EventUtil.addHandler(window, "load", function(event){ document.forms[0].elements[0].focus(); });

要注意的是，若是第一个表单字段是一个<input>元素，且其 type 特性的值为"hidden"，那么
以上代码会致使错误。另外，若是使用 CSS 的 display 和 visibility 属性隐藏了该字段，一样也会
致使错误。

HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，
不用 JavaScript 就能自动把焦点移动到相应字段。例如：

<input type="text" autofocus>

为了保证前面的代码在设置 autofocus 的浏览器中正常运行，必须先检测是否设置了该属性，如
果设置了，就不用再调用 focus()了。

EventUtil.addHandler(window, "load", function(event){ var element = document.forms[0].elements[0]; if (element.autofocus !== true){ element.focus(); console.log("JS focus"); } });

由于 autofocus 是一个布尔值属性，因此在支持的浏览器中它的值应该是 true。（在不支持的浏
览器中，它的值将是空字符串。）为此，上面的代码只有在 autofocus 不等于 true 的状况下才会调用
focus()，从而保证向前兼容。支持 autofocus 属性的浏览器有 Firefox 4+、 Safari 5+、 Chrome 和 Opera
9.6。

在默认状况下，只有表单字段能够得到焦点。对于其余元素而言，若是先将其 tabIndex 属性设置为1，而后再调用 focus()方法，也可让这些元素得到焦点。 只有 Opera 不支持这种技术。

与 focus()方法相对的是 blur()方法，它的做用是从元素中移走焦点。在调用 blur()方法时，
并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走而已。在早期
Web 开发中，那时候的表单字段尚未 readonly 特性，所以就可使用 blur()方法来建立只读字段。
如今，虽然须要使用 blur()的场合很少了，但必要时还可使用的。用法以下：

document.forms[0].elements[0].blur();

3.共有的表单字段事件

除了支持鼠标、键盘、更改和 HTML 事件以外，全部表单字段都支持下列 3 个事件。

 blur：当前字段失去焦点时触发。  change：对于<input>和<textarea>元素，在它们失去焦点且 value 值改变时触发；对于 <select>元素，在其选项改变时触发。  focus：当前字段得到焦点时触发。

一般，可使用 focus 和 blur 事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要
么是向界面中添加额外的功能（例如，为文本框显示一个下拉选项菜单）。而 change 事件则常常用于
验证用户在字段中输入的数据。例如，假设有一个文本框，咱们只容许用户输入数值。此时，能够利用
focus 事件修改文本框的背景颜色，以便更清楚地代表这个字段得到了焦点。能够利用 blur 事件恢复
文本框的背景颜色，利用 change 事件在用户输入了非数值字符时再次修改背景颜色。下面就给出了实
现上述功能的代码。

var textbox = document.forms[0].elements[0];
EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (target.style.backgroundColor != "red"){
target.style.backgroundColor = "yellow";
}
});
EventUtil.addHandler(textbox, "blur", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});
EventUtil.addHandler(textbox, "change", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
if (/[^\d]/.test(target.value)){
target.style.backgroundColor = "red";
} else {
target.style.backgroundColor = "";
}
});

在此， onfocus 事件处理程序将文本框的背景颜色修改成黄色，以清楚地代表当前字段已经激活。
随后， onblur 和 onchange 事件处理程序则会在发现非数值字符时，将文本框背景颜色修改成红色。
为了测试用户输入的是否是非数值，这里针对文本框的 value 属性使用了简单的正则表达式。并且，
为确保不管文本框的值如何变化，验证规则始终如一， onblur 和 onchange 事件处理程序中使用了相
同的正则表达式。

关于 blur 和 change 事件的关系，并无严格的规定。在某些浏览器中， blur
事件会先于 change 事件发生；而在其余浏览器中，则刚好相反。为此，不能假定这
两个事件总会以某种顺序依次触发，这一点要特别注意。

文本框

在 HTML 中，有两种方式来表现文本框：一种是使用<input>元素的单行文本框，另外一种是使用
<textarea>的多行文本框。

要表现文本框，必须将<input>元素的 type 特性设置为"text"。而经过设置 size 特性，能够指
定文本框中可以显示的字符数。经过 value 特性，能够设置文本框的初始值，而 maxlength 特性则用
于指定文本框能够接受的最大字符数。若是要建立一个文本框，让它可以显示 25 个字符，但输入不能
超过 50 个字符，可使用如下代码：

<input type="text" size="25" maxlength="50" value="initial value">

相对而言，<textarea>元素则始终会呈现为一个多行文本框。要指定文本框的大小，可使用 rows
和 cols 特性。其中， rows 特性指定的是文本框的字符行数，而 cols 特性指定的是文本框的字符列数
（相似于<inpu>元素的 size 特性）。与<input>元素不一样， <textarea>的初始值必需要放在
<textarea>和</textarea>之间，以下面的例子所示。

<textarea rows="25" cols="5">initial value</textarea>

另外一个与<input>的区别在于，不能在 HTML 中给<textarea>指定最大字符数。
不管这两种文本框在标记中有什么区别，但它们都会将用户输入的内容保存在 value 属性中。可
以经过这个属性读取和设置文本框的值，以下面的例子所示：

var textbox = document.forms[0].elements["textbox1"];
alert(textbox.value);
textbox.value = "Some new value";

咱们建议读者像上面这样使用 value 属性读取或设置文本框的值，不建议使用标准的 DOM 方法。
换句话说，不要使用 setAttribute()设置<input>元素的 value 特性，也不要去修改<textarea>
元素的第一个子节点。缘由很简单：对 value 属性所做的修改，不必定会反映在 DOM 中。所以，在处
理文本框的值时，最好不要使用 DOM 方法。

选择文本

上述两种文本框都支持 select()方法，这个方法用于选择文本框中的全部文本。在调用 select()
方法时，大多数浏览器（Opera 除外）都会将焦点设置到文本框中。这个方法不接受参数，能够在任何
时候被调用。下面来看一个例子

var textbox = document.forms[0].elements["textbox1"];
textbox.select();

在文本框得到焦点时选择其全部文本，这是一种很是常见的作法，特别是在文本框包含默认值的时
候。由于这样作可让用户没必要一个一个地删除文本。下面展现了实现这一操做的代码

EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});

将上面的代码应用到文本框以后，只要文本框得到焦点，就会选择其中全部的文本。这种技术可以
较大幅度地提高表单的易用性。

1.选择事件

与 select()方法对应的，是一个 select 事件。在选择了文本框中的文本时，就会触发 select
事件。不过，到底何时触发 select 事件，还会因浏览器而异。在 IE9+、 Opera、 Firefox、 Chrome
和 Safari 中，只有用户选择了文本（并且要释放鼠标），才会触发 select 事件。而在 IE8 及更早版本中，

只要用户选择了一个字母（没必要释放鼠标），就会触发 select 事件。另外，在调用 select()方法时也
会触发 select 事件。下面是一个简单的例子。

var textbox = document.forms[0].elements["textbox1"];
EventUtil.addHandler(textbox, "select", function(event){
var alert("Text selected" + textbox.value);
});

2.取得选择的文本

虽然经过 select 事件咱们能够知道用户何时选择了文本，但仍然不知道用户选择了什么文本。
HTML5 经过一些扩展方案解决了这个问题，以便更顺利地取得选择的文本。该规范采起的办法是添加
两个属性： selectionStart 和 selectionEnd。这两个属性中保存的是基于 0 的数值，表示所选择
文本的范围（即文本选区开头和结尾的偏移量）。所以，要取得用户在文本框中选择的文本，可使用
以下代码

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

因为 substring() 方法基于字符串的偏移量执行操做，所以将 selectionStart 和
selectionEnd 直接传给它就能够取得选中的文本。

3.选择部分文本

HTML5 也为选择文本框中的部分文本提供了解决方案，即最早由 Firefox 引入的
setSelectionRange()方法。如今除select()方法以外，全部文本框都有一个setSelectionRange()
方法。这个方法接收两个参数：要选择的第一个字符的索引和要选择的最后一个字符以后的字符的索引
（相似于 substring()方法的两个参数）。来看一个例子

textbox.value = "Hello world!"
//选择全部文本
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//选择前 3 个字符
textbox.setSelectionRange(0, 3); //"Hel"
//选择第 4 到第 6 个字符
textbox.setSelectionRange(4, 7); //"o w"

过滤输入

如前所述，响应向文本框中插入字符操做的是 keypress 事件。所以，能够经过阻止这个事件的默
认行为来屏蔽此类字符。在极端的状况下，能够经过下列代码屏蔽全部按键操做

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
EventUtil.preventDefault(event);
});

运行以上代码后，因为全部按键操做都将被屏蔽，结果会致使文本框变成只读的。若是只想屏蔽特
定的字符，则须要检测 keypress 事件对应的字符编码，而后再决定如何响应。例如，下列代码只容许
用户输入数值。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))){
EventUtil.preventDefault(event);
}
});

在这个例子中，咱们使用 EventUtil.getCharCode()实现了跨浏览器取得字符编码。而后，使
用 String.fromCharCode()将字符编码转换成字符串，再使用正则表达式 /\d/ 来测试该字符串，从
而肯定用户输入的是否是数值。若是测试失败，那么就使用 EventUtil.preventDefault()屏蔽按键
事件。结果，文本框就会忽略全部输入的非数值。

虽然理论上只应该在用户按下字符键时才触发 keypress 事件，但有些浏览器也会对其余键触发此
事件。 Firefox 和 Safari（3.1 版本之前）会对向上键、向下键、退格键和删除键触发 keypress 事件；
Safari 3.1 及更新版本则不会对这些键触发 keypress 事件。这意味着，仅考虑到屏蔽不是数值的字符还
不够，还要避免屏蔽这些极为经常使用和必要的键。所幸的是，要检测这些键并不困难。在 Firefox 中，所
有由非字符键触发的 keypress 事件对应的字符编码为 0，而在 Safari 3 之前的版本中，对应的字符编
码所有为 8。为了让代码更通用，只要不屏蔽那些字符编码小于 10 的键便可。故而，能够将上面的函数
重写成以下所示

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
EventUtil.preventDefault(event);
}
});

这样，咱们的事件处理程序就能够适用全部浏览器了，便可以屏蔽非数值字符，但不屏蔽那些也会
触发 keypress 事件的基本按键。
除此以外，还有一个问题须要处理：复制、粘贴及其余操做还要用到 Ctrl 键。在除 IE 以外的全部
浏览器中，前面的代码也会屏蔽 Ctrl+C、 Ctrl+V，以及其余使用 Ctrl 的组合键。所以，最后还要添加一
个检测条件，以确保用户没有按下 Ctrl 键，以下面的例子所示

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode)) && charCode > 9 &&
!event.ctrlKey){
EventUtil.preventDefault(event);
}
});

通过最后一点修改，就能够确保文本框的行为彻底正常了。在这个例子的基础上加以修改和调整，
就能够将一样的技术运用于放过和屏蔽任何输入文本框的字符。

2.操做剪切板

下列就是 6 个剪贴板事件：

 beforecopy：在发生复制操做前触发。
 copy：在发生复制操做时触发。
 beforecut：在发生剪切操做前触发。
 cut：在发生剪切操做时触发。
 beforepaste：在发生粘贴操做前触发。
 paste：在发生粘贴操做时触发。

要访问剪贴板中的数据，可使用 clipboardData 对象：在 IE 中，这个对象是 window 对象的
属性；而在 Firefox 4+、 Safari 和 Chrome 中，这个对象是相应 event 对象的属性。可是，在 Firefox、
Safari 和 Chorme 中，只有在处理剪贴板事件期间 clipboardData 对象才有效，这是为了防止对剪贴板
的未受权访问；在 IE 中，则能够随时访问 clipboardData 对象。为了确保跨浏览器兼容性，最好只
在发生剪贴板事件期间使用这个对象。
这个 clipboardData 对象有三个方法：getData()、setData()和 clearData()。其中，getData()
用于从剪贴板中取得数据，它接受一个参数，即要取得的数据的格式。在 IE 中，有两种数据格式： "text"
和"URL"。在 Firefox、 Safari 和 Chrome 中，这个参数是一种 MIME 类型；不过，能够用"text"表明
"text/plain"。
相似地， setData()方法的第一个参数也是数据类型，第二个参数是要放在剪贴板中的文本。对于
第一个参数， IE 照样支持"text"和"URL"，而 Safari 和 Chrome 仍然只支持 MIME 类型。可是，与
getData()方法不一样的是， Safari 和 Chrome 的 setData()方法不能识别"text"类型。这两个浏览器在
成功将文本放到剪贴板中后，都会返回 true；不然，返回 false。为了弥合这些差别，咱们能够向
EventUtil 中再添加下列方法。

var EventUtil = {
//省略的代码
getClipboardText: function(event){
var clipboardData = (event.clipboardData || window.clipboardData);
return clipboardData.getData("text");
},
//省略的代码
setClipboardText: function(event, value){
if (event.clipboardData){
return event.clipboardData.setData("text/plain", value);
} else if (window.clipboardData){
return window.clipboardData.setData("text", value);
}
},
//省略的代码
};

在须要确保粘贴到文本框中的文本中包含某些字符，或者符合某种格式要求时，可以访问剪贴板是非
常有用的。例如，若是一个文本框只接受数值，那么就必须检测粘贴过来的值，以确保有效。在 paste
事件中，能够肯定剪贴板中的值是否有效，若是无效，就能够像下面示例中那样，取消默认的行为。

EventUtil.addHandler(textbox, "paste", function(event){
event = EventUtil.getEvent(event);
var text = EventUtil.getClipboardText(event);
if (!/^\d*$/.test(text)){
EventUtil.preventDefault(event);
}
});

自动切换焦点

使用 JavaScript 能够从多个方面加强表单字段的易用性。其中，最多见的一种方式就是在用户填写
完当前字段时，自动将焦点切换到下一个字段。一般，在自动切换焦点以前，必须知道用户已经输入了
既定长度的数据（例如电话号码）。例如，美国的电话号码一般会分为三部分：区号、局号和另外 4 位
数字。为取得完整的电话号码，不少网页中都会提供下列 3 个文本框：

<input type="text" name="tel1" id="txtTel1" maxlength="3">
<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

为加强易用性，同时加快数据输入，能够在前一个文本框中的字符达到最大数量后，自动将焦点切
换到下一个文本框。换句话说，用户在第一个文本框中输入了 3 个数字以后，焦点就会切换到第二个文
本框，再输入 3 个数字，焦点又会切换到第三个文本框。这种“自动切换焦点”的功能，能够经过下列
代码实现：

(function(){ function tabForward(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] == target) { if (form.elements[i+1]){ form.elements[i+1].focus(); } return; } } } } var textbox1 = document.getElementById("txtTel1"); var textbox2 = document.getElementById("txtTel2"); var textbox3 = document.getElementById("txtTel3"); EventUtil.addHandler(textbox1, "keyup", tabForward); EventUtil.addHandler(textbox2, "keyup", tabForward); EventUtil.addHandler(textbox3, "keyup", tabForward); })();