javascript自动切换焦点控制效果完整实例
网络编程 2021-07-04 21:04www.168986.cn编程入门
这篇文章主要介绍了javascript自动切换焦点控制效果的方法,结合完整实例形式分析了JavaScript响应键盘按键控制表单输入框的焦点切换功能,需要的朋友可以参考下
本文实例讲述了javascript自动切换焦点控制的方法。分享给大家供大家参考,具体如下:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var EventUtil = { addHandler: function(element,type, handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); }else if(element.attachEvent){ element.attachEvent("on"+type,handler); }else{ element["on"+type]=null; } }, removeHandle:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); }else if(element.detachEvent){ element.detachEvent("on"+type,handler); } }, getEvent:function(event){ return event ? event:window.event; }, getTarget:function(event){ return event.target || event.srcElement; }, preventDefault:function(event){ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } }, sPropagation:function(event){ if(event.sPropagation){ event.sPropagation(); }else{ event.cancelBubble=true; } } }; var dom_text1=document.getElementById("text1"); var dom_text2=document.getElementById("text2"); var dom_text3=document.getElementById("text3"); function switchFocus(event){ event=EventUtil.getEvent(event); var target=EventUtil.getTarget(event); if(target.value.length==target.maxLength){ var form=target.form; for(var i=0;i<form.elements.length;i++){ if(form.elements[i]==target){ form.elements[i+1].focus(); return; } } } } EventUtil.addHandler(dom_text1,"keyup",switchFocus); EventUtil.addHandler(dom_text2,"keyup",switchFocus); EventUtil.addHandler(dom_text3,"keyup",switchFocus); }) </script> </head> <body> <form id="form1"> <input type="text" maxlength="3" id="text1"/> <input type="text" maxlength="3" id="text2"/> <input type="text" maxlength="3" id="text3"/> </br> <input type="text" /> </form> </body> </html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
上一篇:Webwork 实现文件上传下载代码详解
下一篇:原生js实现图片层叠轮播切换效果
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程