地  址:江苏省南京市玄武区玄武湖
电  话:4008-888-888
邮  箱:9490489@qq.com
商  务QQ:3870238121
表单字段全自动切换聚焦点完成方式
作者:管理员    发布于:2020-07-16 13:27   文字:【】【】【
应用 JavaScript能够从好几个层面提高表单字段的易用性。在其中,普遍的1种方法便是在客户填写 完当今字段时,全自动将聚焦点切换到下1个字段。一般,在全自动切换聚焦点以前,务必了解客户早已键入了 既定长度的数据信息(比如电話号码)。比如,我国的电話号码一般会分成3一部分:区号(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        为提高易用性,另外加速数据信息键入,能够在前1个文字框中的标识符做到绝大多数量后,全自动将聚焦点切换到下1个文字框。换句话说,客户在第1个文字框中键入了 2个数据以后,聚焦点就会切换到第2个文 本框,再键入 4个数据,聚焦点又会切换到第3个文字框。这类 全自动切换聚焦点 的作用,能够根据以下编码完成:

  !DOCTYPE html html head         title 表单字段全自动切换聚焦点案例 /title         script type= text/javascript src= EventUtil.js /script /head body         form method= post action= jxbh               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 特点,能够明确是不是早已做到大长度。假如这两个值相同(由于访问器终 会强制性它们相同,因而客户决不会多键入标识符),则必须搜索表单字段结合,直至寻找下1个文字框。 寻找下1个文字框以后,则将聚焦点切换到该文字框。随后,大家把这个涵数特定为每一个文字框的 onkeyup 恶性事件解决程序流程。因为 keyup 恶性事件会在客户键入了新标识符以后开启,因此此时是检验文字框中內容长度 的佳机会。这样1来,客户在填写这个简易的表单时,就无须再根据按制表键切换表单字段和递交表单了。 但是请记牢,这些编码只可用于前面得出的标识,并且沒有考虑到掩藏字段。

强烈推荐阅读文章:







  以上內容由独运高新科技(wzjs888)为您出示,转载请注明出处,更多相关天津市企业网站建设,手机软件开发设计,网站代经营提升、手机微信网站建设(微官方网站)、手机上app开发设计、公司UI设计方案等互联网技术运用服务都可以以联络大家。热线:138⑵142-0129或致电136⑵215-0903张主管。  独运高新科技每日都会不确定时升级相关天津市网站建设和互联网营销推广营销推广的文章内容,期待对您有效。
独运高新科技是技术专业从业天津市企业网站建设、天津市网站建设、手机软件开发设计、挪动建网站、商城、手机微信端、app开发设计新项目
手机软件工作部:天津市市大学手机软件学校D⑸10(天津市工业生产大学校内)
网站工作部: 天津市市河北省区北宁弯万顺日常生活城市广场9⑴208(华为手机上旗舰店旁通道)
资询热线:138⑵142-0129 136⑵215-0903
Copyright © 2002-2020 免费制作app网站_免费建站的网站_宣传网站制作_9免费建站的网站_免费网页制作模板 版权所有 (网站地图
地址:江苏省南京市玄武区玄武湖 电话:4008-888-888
邮箱:9490489@qq.com QQ:3870238121