Javascript中自动切换焦点实现代码


Posted in Javascript onDecember 15, 2012
<!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 isArray()函数判断对象类型的种种方法
Oct 11 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
深入理解javascript中defer的作用
Dec 11 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
May 20 Javascript
js通过location.search来获取页面传来的参数
Sep 11 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
Oct 29 jQuery
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
treepanel动态加载数据实现代码
Dec 15 #Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 #Javascript
javascript错误的认识不用关心内存管理
Dec 15 #Javascript
jQuery 选择表格(table)里的行和列及改变简单样式
Dec 15 #Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 #Javascript
js 操作select和option常用代码整理
Dec 13 #Javascript
JavaScript 产生不重复的随机数三种实现思路
Dec 13 #Javascript
You might like
PHP 压缩文件夹的类代码
2009/11/05 PHP
PHP将进程作为守护进程的方法
2015/03/19 PHP
php bootstrap实现简单登录
2016/03/08 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
浅谈js for循环输出i为同一值的问题
2017/03/01 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
django+mysql的使用示例
2018/11/23 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
美国时装品牌:Nautica(诺帝卡)
2016/08/28 全球购物
印度购物网站:TATA CLiQ
2017/11/23 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
应届毕业生个人自荐信范文
2013/11/30 职场文书
教师演讲稿范文
2014/01/08 职场文书
优秀教师获奖感言
2014/01/31 职场文书
教学实验楼管理制度
2014/02/01 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
罚站检讨书
2015/01/29 职场文书
清明节扫墓活动总结
2015/02/09 职场文书