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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
js 数值项目的格式化函数代码
May 14 Javascript
javascript多种数据类型表格排序代码分析
Sep 11 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
JavaScript动态添加列的方法
Mar 25 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
微信小程序中button组件的边框设置的实例详解
Sep 27 Javascript
AngularJS实现的select二级联动下拉菜单功能示例
Oct 25 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
Aug 07 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 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
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
laravel中数据显示方法(默认值和下拉option默认选中)
2019/10/11 PHP
jquery select下拉框操作的一些说明
2010/04/02 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
AngularJS用户选择器指令实例分析
2016/11/04 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
js实现表格筛选功能
2017/01/18 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
jQuery实现的简单对话框拖动功能示例
2018/06/05 jQuery
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
原生js实现下拉选项卡
2019/11/27 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
在pandas中一次性删除dataframe的多个列方法
2018/04/10 Python
在Windows中设置Python环境变量的实例讲解
2018/04/28 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
django创建超级用户过程解析
2019/09/18 Python
python numpy库np.percentile用法说明
2020/06/08 Python
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
物业经理求职自我评价
2013/09/22 职场文书
幼儿教师思想汇报
2014/01/10 职场文书
先进工作者获奖感言
2014/02/08 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
房屋分割离婚协议书范本
2014/12/01 职场文书
社区党建工作总结2015
2015/05/13 职场文书
开学第一天的感想
2015/08/10 职场文书
小学思品教学反思
2016/02/20 职场文书
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
Nginx内网单机反向代理的实现
2021/11/07 Servers