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去除重复字符串两种实现方法
Jan 09 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
javascript实现获取字符串hash值
May 10 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
基于vue实现可搜索下拉框定制组件
Mar 26 Javascript
JS中验证整数和小数的正则表达式
Oct 08 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
node实现socket链接与GPRS进行通信的方法
May 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实现encode64编码类实例
2015/03/24 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
js兼容标准的表格变色效果
2008/06/28 Javascript
JS location几个方法小姐
2008/07/09 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
js中的cookie的读写操作示例详解
2014/04/17 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
JS原生瀑布流效果实现
2019/04/26 Javascript
如何获取vue单文件自身源码路径
2019/05/06 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
利用python实现简单的循环购物车功能示例代码
2017/07/05 Python
浅谈Python NLP入门教程
2017/12/25 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
实例讲解python中的协程
2018/10/08 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
python开发一款翻译工具
2020/10/10 Python
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
北美领先的牛仔品牌:Buffalo David Bitton
2017/05/22 全球购物
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
ORACLE第二个十问
2013/12/14 面试题
会计专业自荐信
2014/06/03 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2015暑期社会实践个人总结
2015/07/13 职场文书
《七月的天山》教学反思
2016/02/19 职场文书
Python深度学习之实现卷积神经网络
2021/06/05 Python
Redis RDB技术底层原理详解
2021/09/04 Redis