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基础学习资料
Nov 23 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
用JavaScript实现类似于ListBox功能示例代码
Mar 09 Javascript
JS使用for循环遍历Table的所有单元格内容
Aug 21 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
jQuery EasyUI 入门必看
Jun 03 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
JavaScript实现公告栏上下滚动效果
Mar 13 Javascript
js实现有趣的倒计时效果
Jan 19 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
基于mysql的论坛(2)
2006/10/09 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
js实现精美的银灰色竖排折叠菜单
2015/05/16 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
JS实现点击上移下移LI行数据的方法
2015/08/05 Javascript
JS模拟bootstrap下拉菜单效果实例
2016/06/17 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
一次$.getJSON不执行的简单记录
2016/07/19 Javascript
jQuery实现简单的抽奖游戏
2017/05/05 jQuery
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
详解JS获取HTML DOM元素的8种方法
2017/06/17 Javascript
使用js实现将后台传入的json数据放在前台显示
2018/08/06 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
javascript实现fetch请求返回的统一拦截
2019/12/22 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
node.js爬虫框架node-crawler初体验
2020/10/29 Javascript
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python使用分治法实现求解最大值的方法
2015/05/12 Python
Python循环语句之break与continue的用法
2015/10/14 Python
用python实现百度翻译的示例代码
2018/03/09 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
python ipset管理 增删白名单的方法
2019/01/14 Python
python math模块的基本使用教程
2021/01/16 Python
将世界上最美丽的摄影作品转化为艺术作品:Photos.com
2017/11/28 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
青年教师典范事迹材料
2014/01/31 职场文书
心灵点滴观后感
2015/06/02 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
人生感悟经典句子
2019/08/20 职场文书
Python Pandas pandas.read_sql函数实例用法
2021/06/21 Python