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 相关文章推荐
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
Mar 06 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 Javascript
解析Jquery取得iframe中元素的几种方法
Jul 04 Javascript
使用javaScript动态加载Js文件和Css文件
Oct 24 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
关于JS中二维数组的声明方法
Sep 24 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
Mar 14 Javascript
js自定义Tab选项卡效果
Jun 05 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
JavaScript实现轮播图片完整代码
Mar 07 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框架开发移动端接口(2)
2016/08/18 PHP
PHP实现添加购物车功能
2017/03/06 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
下载给定网页上图片的方法
2014/02/18 Python
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
实例探究Python以并发方式编写高性能端口扫描器的方法
2016/06/14 Python
Python实现的栈(Stack)
2018/01/26 Python
Python的条件锁与事件共享详解
2019/09/12 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Python *args和**kwargs用法实例解析
2020/03/02 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
Python pathlib模块使用方法及实例解析
2020/10/05 Python
你对IPv6了解程度
2016/02/09 面试题
小区门卫岗位职责
2013/12/31 职场文书
给儿子的表扬信
2014/01/15 职场文书
会计学自我鉴定
2014/02/06 职场文书
防沙治沙典型材料
2014/05/07 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
求职自我评价范文100字
2014/09/23 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
实习介绍信范文
2015/05/05 职场文书
工程质量保证书
2015/05/09 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
详解Python常用的魔法方法
2021/06/03 Python
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS