javascript基础学习系列三百零六：自动切换

AJavaScript 可以通过很多方式来增强表单字段的易用性。最常用的是在当前字段完成时自动切换到 下一个字段。对于要收集数据的长度已知(比如电话号码)的字段是可以这样处理的。在美国，电话号 码通常分为 3 个部分:区号、交换局号，外加 4 位数字。在网页中，可以通过 3 个文本框来表示这几个 部分，比如:

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

为增加这个表单的易用性并加速数据输入，可以在每个文本框输入到最大允许字符数时自动把焦点 切换到下一个文本框。因此，当用户在第一个文本框中输入 3 个字符后，就把焦点移到第二个文本框， 21 当用户在第二个文本框中输入 3 个字符后，把焦点再移到第三个文本框。这种自动切换文本框的行为可 以通过如下代码实现:

<script> 22 function tabForward(event){
 <input type="text" name="tel1" id="txtTel1" maxlength="3">
   let target = event.target;
  if (target.value.length == target.maxLength){
    let form = target.form;
    for (let 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; }
} }
}
let inputIds = ["txtTel1", "txtTel2", "txtTel3"];
for (let id of inputIds) {
  let textbox = document.getElementById(id);
     textbox.addEventListener("keyup", tabForward);
}
let textbox1 = document.getElementById("txtTel1");
let textbox2 = document.getElementById("txtTel2");
let textbox3 = document.getElementById("txtTel3");

 </script>

表单脚本

这个 tabForward()函数是实现自动切换的关键。它通过比较用户输入文本的长度与 maxlength 属性的值来检测输入是否达到了最大长度。如果两者相等(因为浏览器会强制最大字符数，所以不可能 出现多的情况)，那么就要通过循环表单中的元素集合找到当前文本框，并把焦点设置到下一个元素。 这个函数接着给每一个文本框都指定了 onkeyup 事件处理程序。因为 keyup 事件会在每个新字符被插 入到文本框中时触发，所以此时应该是检测文本框内容长度的最佳时机。在填写这个简单的表单时，用 户不用按 Tab 键切换字段和提交表单。
不过要注意，上面的代码只适用于之前既定的标记，没有考虑可能存在的隐藏字段。

HTML5 约束验证 API

HTML5 为浏览器新增了在提交表单前验证数据的能力。这些能力实现了基本的验证，即使 JavaScript 不可用或加载失败也没关系。这是因为浏览器自身会基于指定的规则进行验证，并在出错时显示适当的 错误消息(无须 JavaScript)。这些能力只有支持 HTML5 这部分的浏览器才有，包括所有现代浏览器(除 了 Safari)和 IE10+。
验证会根据某些条件应用到表单字段。可以使用 HTML 标记指定对特定字段的约束，然后浏览器 会根据这些约束自动执行表单验证。

必填字段

第一个条件是给表单字段添加 required 属性，如下所示:

<input type="text" name="username" required>

任何带有 required 属性的字段都必须有值，否则无法提交表单。这个属性适用于、 和字段(Opera 直到版本 11 都不支持的 required 属性)。可以通过 JavaScript 检测对应元素的 required 属性来判断表单字段是否为必填:

let isUsernameRequired = document.forms[0].elements["username"].required;

还可以使用下面的代码检测浏览器是否支持 required 属性:

let isRequiredSupported = "required" in document.createElement("input");

这行代码使用简单的特性检测来确定新创建的元素上是否存在 required 属性。
注意，不同浏览器处理必填字段的机制不同。Firefox、Chrome、IE 和 Opera 会阻止表单提交并在相 应字段下面显示有帮助信息的弹框，而 Safari 什么也不做，也不会阻止提交表单。

更多输入类型

HTML5 为元素增加了几个新的 type 值。这些类型属性不仅表明了字段期待的数据类型， 而且也提供了一些默认验证，其中两个新的输入类型是已经得到广泛支持的"email"和"url"，二者都 有浏览器提供的自定义验证。比如:

   <input type="email" name="email">
    <input type="url" name="homepage">

“email"类型确保输入的文本匹配电子邮件地址，而"url"类型确保输入的文本匹配 URL。注意， 浏览器在匹配模式时都存在问题。最明显的是文本”-@-“会被认为是有效的电子邮件地址。浏览器厂商 仍然在解决这些问题。
要检测浏览器是否支持这些新类型，可以在 JavaScript 中新创建一个输入元素并将其类型属性设置 为"email"或"url”，然后再读取该元素的值。老版本浏览器会自动将未知类型值设置为"text"，而支持的浏览器会返回正确的值。比如:

   let input = document.createElement("input");
    input.type = "email";
    let isEmailSupported = (input.type == "email");

对于这两个新类型，除非应用了 required 属性，否则空字段是有效的。另外，指定一个特殊输入 类型并不会阻止用户输入无效的值。新类型只是会应用一些默认验证。

数值范围

除了"email"和"url"，HTML5 还定义了其他几种新的输入元素类型，它们都是期待某种数值输 入的，包括:“number”、“range”、“datetime”、“datetime-local”、“date”、“month”、“week” 和"time"。并非所有主流浏览器都支持这些类型，因此使用时要当心。浏览器厂商目前正致力于解决 兼容性问题和提供更逻辑化的功能。本节内容更多地是介绍未来趋势，而不是讨论当前就能用的功能。
对上述每种数值类型，都可以指定 min 属性(最小可能值)、max 属性(最大可能值)，以及 step 属性(从 min 到 max 的步长值)。例如，如果只允许输入 0 到 100 中 5 的倍数，那么可以这样写:

   <input type="number" min="0" max="100" step="5" name="count">

根据浏览器的不同，可能会也可能不会出现旋转控件(上下按钮)用于自动增加和减少。
上面每个属性在 JavaScript 中也可以通过对应元素的 DOM 属性来访问和修改。此外，还有两个方 法，即 stepUp()和 stepDown()。这两个方法都接收一个可选的参数:要从当前值加上或减去的数 值。(默认情况下，步长值会递增或递减 1。)虽然浏览器还没有实现这些方法，但可以先看一下它们的 用法:

input.stepUp(); input.stepUp(5); input.stepDown(); input.stepDown(10); // 减10