(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); })();
HTML5约束验证API
为了在将表单提交到服务器之前验证数据，HTML5 新增了一些功能。
必填字段：required，例子比如：<input type="text" required>
type属性："email"类型要求输入的文本必须符合电子邮件地址的模式，而"url"类型要求输入的文本必须符合 URL 的模式。
pattern属性：这个属性的值是一个正则表达式，用于匹配文本框中的值。例子如：<input type="text" pattern="\d+">
禁用验证：通过设置 novalidate 属性，可以告诉表单不进行验证。 例子如：
<form method="post" action="signup.php" novalidate> <!--这里插入表单元素--> </form>
三，选择框脚本
选择框是通过<select>和<option>元素创建的。 该类型还提供下列属性和方法：
add(newOption, relOption)：向控件中插入新<option>元素，其位置在相关项（relOption）之前。
multiple：布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。
options：控件中所有<option>元素的 HTMLCollection。
remove(index)：移除给定位置的选项。
selectedIndex：基于 0 的选中项的索引，如果没有选中项，则值为-1。对于支持多选的控件，只保存选中项中第一项的索引。
size：选择框中可见的行数；等价于 HTML 中的 size 特性。
选择框的 type 属性不是"select-one"，就是"select-multiple"，这取决于 HTML 代码中有没有 multiple 特性。选择框的 value 属性由当前选中项决定，相应规则如下。
如果没有选中的项，则选择框的 value 属性保存空字符串。
如果有一个选中项，而且该项的 value 特性已经在 HTML 中指定，则选择框的 value 属性等于选中项的 value 特性。即使 value 特性的值是空字符串，也同样遵循此条规则。
如果有一个选中项，但该项的 value 特性在 HTML 中未指定，则选择框的 value 属性等于该项的文本。
如果有多个选中项，则选择框的 value 属性将依据前两条规则取得第一个选中项的值。
选择选项：
对于只允许选择一项的选择框，访问选中项的最简单方式，就是使用选择框的 selectedIndex 属性。例子如：
var selectedOption = selectbox.options[selectbox.selectedIndex];
添加选项：
可以使用 JavaScript 动态创建选项，并将它们添加到选择框中。
第一种方式就是使用如下所示的 DOM 方法：
var newOption = document.createElement("option"); newOption.appendChild(document.createTextNode("Option text")); newOption.setAttribute("value", "Option value"); selectbox.appendChild(newOption);
第二种方式是使用 Option 构造函数来创建新选项 :
var newOption = new Option("Option text", "Option value"); selectbox.appendChild(newOption);
第三种添加新选项的方式是使用选择框的 add()方法，DOM 规定这个方法接受两个参数，要添加的新选项和将位于新选项之后的选项 ：
var newOption = new Option("Option text", "Option value"); // selectbox.add(newOption, undefined); //最佳方案 ，将新选项添加到列表最后
移除选项：
DOM 的 removeChild()方法，为其传入要移除的选项，如下面的例子所示：
selectbox.removeChild(selectbox.options[0]); //移除第一个选项
其次，可以使用选择框的 remove()方法 ：
selectbox.remove(0); //移除第一个选项
最后一种方式，就是将相应选项设置为 null：
selectbox.options[0] = null; //移除第一个选项
要清除选择框中所有的项，需要迭代所有选项并逐个移除它们 ：
function clearSelectbox(selectbox){ for(var i=0, len=selectbox.options.length; i < len; i++){ selectbox.remove(0); } }