Javascript中自动切换焦点实现代码
2012-12-15 00:00
671 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test javascript</title> <script type="text/javascript"> window.onload = function() { var EventUtil = { addhandler:function(element,type,handler) { if(element.addEventListenter) { element.addEventListenter(type,handler,false); } else if (element.attachEvent) { element.attachEvent("on"+type,handler); } else { element["on"+type] = handler; } }, getEvent:function(event) { return event?event:window.event; }, getTarget:function() { return event.target || event.srcElement; }, preventDefault:function() { if(event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, stopPropagation:function() { if(event.stopPropagation) { event.stopPropagation(); } else { event.cancelBuddle = true; } }, removehandler:function(element,type,handler) { if(element.removeEventListenter) { element.addEventListenter(type,handler,false); } else if (element.detachEvent) { element.detachEvent("on"+type,handler); } else { element["on"+type] = null; } }, getCharCode: function(event) { if(typeof event.charCode == "number") { return event.charCode; } else { return event.keyCode; } }, getClipboardText: function(event) { var clipboardData = event.clipboardData || window.clipboardData; return clipboardData.getData("text"); }, setClipboardText: function(event,value) { if(event.clipboardData) { return event.clipboardData.setData("text/plain",value); } else if(window.clipboardData){ return window.clipboardData.setData("text",value); } } } var textarea = document.forms[0].elements["text"]; var button = document.getElementById("button"); (function() { function tabForward(event) { event = EventUtil.getEvent(event); var target = EventUtil.getTarget(event); if(target.value.length == target.maxLength) { var form = target.parentElement; for(var i=0,len = form.elements.length;i<len-1;i++) { if(form.elements[i] == target) { form.elements[i+1].focus(); return ; } } } } var textTel1 = document.getElementById("txtTel1"); var textTel2 = document.getElementById("txtTel2"); var textTel3 = document.getElementById("txtTel3"); EventUtil.addhandler(textTel1,"keyup",tabForward); EventUtil.addhandler(textTel2,"keyup",tabForward); EventUtil.addhandler(textTel3,"keyup",tabForward); })(); } </script> </head> <body> <form> <input type="text" name="tel1" id="txtTel1" maxlength="3" /> <input type="text" name="tel2" id="txtTel2" maxlength="3" /> <input type="text" name="tel3" id="txtTel3" maxlength="3" /> </form> </body> </html>
相关文章推荐
- Javascript中自动切换焦点实现代码
- JavaScript表单焦点自动切换代码
- javascript实现自动切换焦点功能学习
- 自动切换焦点的代码实现
- JavaScript表单焦点自动切换代码
- JavaScript实现自动切换图片代码
- 一行代码快速实现今日头条 网易新闻焦点图自动循环轮播效果
- jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
- javascript suggest效果 自动完成实现代码分享
- javascript实现标签切换代码示例
- JavaScript实现url地址自动检测并添加URL链接示例代码
- JavaScript实现音乐自动切换和轮播
- JavaScript代码实现返回上一页并自动刷新
- jQuery实现焦点图自动切换
- Javascript实现DIV滚动自动滚动到底部的代码
- 基于JavaScript代码实现自动生成表格
- JS+CSS实现自动切换的网页滑动门菜单效果代码
- jQuery实现回车键(Enter)切换文本框焦点的代码实例
- 详解原生JS根据图片多少自动生成相册_实现焦点或按钮切换图片
- jquery(javascript)自动序列编号和属性编号实现代码