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系列之Javascript基础篇
Jun 07 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
JQUERY的AJAX请求缓存里的数据问题处理
Feb 23 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 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 CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
javascript动画浅析
2012/08/30 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
很棒的Bootstrap选项卡切换效果
2016/07/01 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
2017/02/03 Javascript
Gulp实现静态网页模块化的方法详解
2018/01/09 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
Python CSV模块使用实例
2015/04/09 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python如何生成树形图案
2018/01/03 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python 占位符的使用方法详解
2019/07/10 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
零基础学python应该从哪里入手
2020/08/11 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
具有防紫外线功能的高性能钓鱼服装:Hook&Tackle
2018/08/16 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
教师远程培训感言
2014/03/06 职场文书
大学生工作求职信
2014/06/23 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
2015年度村委会工作总结
2015/04/29 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang