十年专注于品牌网站建设 十年专注于品牌网站建设,低调、高逼格、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

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

百恒网络 2017-02-08 230

使用 JavaScript可以从多个方面增强表单字段的易用性。其中,常见的一种方式就是在用户填写 完当前字段时,自动将焦点切换到下一个字段。通常,在自动切换焦点之前,必须知道用户已经输入了 既定长度的数据(例如电话号码)。例如,中国的电话号码通常会分为三部分:区号(86)、省区号和另外 8 位 数字。为取得完整的电话号码,很多网页中都会提供下列 3个文本框: 
       <input type="text" name="tel1" id="txtTel1" maxlength="2"> 
       <input type="text" name="tel2" id="txtTel2" maxlength="4">
       <input type="text" name="tel3" id="txtTel3" maxlength="8">
       为增强易用性,同时加快数据输入,可以在前一个文本框中的字符达到大数量后,自动将焦点切换到下一个文本框。换句话说,用户在第一个文本框中输入了 2个数字之后,焦点就会切换到第二个文 本框,再输入 4个数字,焦点又会切换到第三个文本框。这种“自动切换焦点”的功能,可以通过下列代码实现:
<!DOCTYPE html>
<html>
<head>
       <title>表单字段自动切换焦点实例</title>
       <script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
       <form method="post" action="http://www.jxbh.cn">
              <p>Enter your telephone number:</p>
              <input type="text" name="tel1" id="txtTel1" size="2" maxlength="2" >
              <input type="text" name="tel2" id="txtTel2" size="4" maxlength="4" >
              <input type="text" name="tel3" id="txtTel3" size="8" maxlength="8" >
               <input type="submit" value="Submit">
       </form>
<script type="text/javascript">
(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"),
              textbox2 = document.getElementById("txtTel2"),
              textbox3 = document.getElementById("txtTel3");

              EventUtil.addHandler(textbox1, "keyup", tabForward); 
              EventUtil.addHandler(textbox2, "keyup", tabForward); 
              EventUtil.addHandler(textbox3, "keyup", tabForward); 

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

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×