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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
区分JS中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
微信小程序自定义底部导航带跳转功能
Nov 27 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 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
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
splice slice区别
2006/10/09 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
jQuery隔行变色与普通JS写法的对比
2013/04/21 Javascript
同域jQuery(跨)iframe操作DOM(实例讲解)
2013/12/19 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
jQuery设置指定网页元素宽度和高度的方法
2015/03/25 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
BootStrap表单时间选择器详解
2017/05/09 Javascript
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
全面解析vue router 基本使用(动态路由,嵌套路由)
2018/09/02 Javascript
对VUE中的对象添加属性
2018/09/18 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
Python 性能优化技巧总结
2016/11/01 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
解决Python selenium get页面很慢时的问题
2019/01/30 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
CSS3中:nth-child和:nth-of-type的区别深入理解
2014/03/10 HTML / CSS
HTML5 canvas基本绘图之图形变换
2016/06/27 HTML / CSS
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
UNIX文件类型
2013/08/29 面试题
行政副总岗位职责
2014/02/23 职场文书
内勤主管岗位职责
2014/04/03 职场文书
授权委托书
2015/01/28 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
Windows 11要来了?微软文档揭示Win11太阳谷 / Win10有两个不同版本
2021/11/21 数码科技
JavaScript流程控制(循环)
2021/12/06 Javascript