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 相关文章推荐
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
node.js中的fs.openSync方法使用说明
Dec 17 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
微信小程序 navbar实例详解
May 11 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
vue-resouce设置请求头的三种方法
Sep 12 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
JavaScript闭包原理与用法学习笔记
May 29 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制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
解析linux下安装memcacheq(mcq)全过程笔记
2013/06/27 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
php strftime函数获取日期时间(switch用法)
2018/05/16 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
底部悬浮通栏可以关闭广告位的实现方法
2016/06/01 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
jQuery+正则+文本框只能输入数字的实现方法
2016/10/07 Javascript
利用VUE框架,实现列表分页功能示例代码
2017/01/12 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
JavaScript this关键字的深入详解
2021/01/14 Javascript
[02:58]魔廷新尊——痛苦女王至宝语音台词节选
2020/06/14 DOTA
python处理大数字的方法
2015/05/27 Python
Python获取SQLite查询结果表列名的方法
2017/06/21 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
HTML5 Canvas入门学习教程
2016/03/17 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
精彩自我鉴定
2014/01/16 职场文书
十一酒店活动方案
2014/02/20 职场文书
工作睡觉检讨书
2014/02/25 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
工作检讨书范文
2015/01/23 职场文书
个人年终总结范文
2015/03/09 职场文书
银行自荐信范文
2015/03/25 职场文书
家装业务员岗位职责
2015/04/03 职场文书
2016教师国培研修感言
2015/12/08 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js