表单字段自动切换焦点实现方法

发布时间：2022/01/10 丨 文章来源：未知 丨 浏览次数：

使用 JavaScript可以从多个方面增强表单字段的易用性。其中，常见的一种方式就是在用户填写 完当前字段时，自动将焦点切换到下一个字段。通常，在自动切换焦点之前，必须知道用户已经输入了 既定长度的数据（例如电话号码）。例如，中国的电话号码通常会分为三部分：区号（86）、省区号和另外 8 位 数字。为取得完整的电话号码，很多网页中都会提供下列 3个文本框：?
? ? ? ??
? ? ? ?
? ? ? ?
? ? ? ?为增强易用性，同时加快数据输入，可以在前一个文本框中的字符达到大数量后，自动将焦点切换到下一个文本框。换句话说，用户在第一个文本框中输入了 2个数字之后，焦点就会切换到第二个文 本框，再输入 4个数字，焦点又会切换到第三个文本框。这种“自动切换焦点”的功能，可以通过下列代码实现：



? ? ? ?
? ? ? ?


? ? ? ?

? ? ? ? ? ? ?

Enter your telephone number:

? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ?
? ? ? ? ? ? ? ?
? ? ? ?

? ? ? ?在此南昌网站建设公司网络前端工程师告诉大家 tabForward()函数是实现“自动切换焦点”的关键所在。这个函数通过比较用户输入的值 与文本框的 maxlength 特性，可以确定是否已经达到大长度。如果这两个值相等（因为浏览器终 会强制它们相等，因此用户绝不会多输入字符），则需要查找表单字段集合，直至找到下一个文本框。 找到下一个文本框之后，则将焦点切换到该文本框。然后，我们把这个函数指定为每个文本框的 onkeyup 事件处理程序。由于 keyup 事件会在用户输入了新字符之后触发，所以此时是检测文本框中内容长度 的佳时机。这样一来，用户在填写这个简单的表单时，就不必再通过按制表键切换表单字段和提交表单了。 不过请记住，这些代码只适用于前面给出的标记，而且没有考虑隐藏字段。
? ?本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广大技人员有所帮助。原创文章出自:南昌APP开发公司-网络 http://www.huicuiwang.cn/ 如转载请注明出处!