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 18 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
NW.js 简介与使用方法
Feb 01 Javascript
浅谈对于react-thunk中间件的简单理解
May 01 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
Postman参数化实现过程及原理解析
Aug 13 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
一个分页的论坛
2006/10/09 PHP
php中的登陆login
2007/01/18 PHP
php中文字符截取防乱码
2008/03/28 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
JQuery的read函数与js的onload不同方式实现
2013/03/18 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
2014/06/16 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
javascript实现电脑和手机版样式切换
2017/11/10 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
介绍Python的@property装饰器的用法
2015/04/28 Python
python利用datetime模块计算时间差
2015/08/04 Python
Python3安装Pymongo详细步骤
2017/05/26 Python
Python中利用xpath解析HTML的方法
2018/05/14 Python
python初学者,用python实现基本的学生管理系统(python3)代码实例
2019/04/10 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
Python实现i人事自动打卡的示例代码
2020/01/09 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
CSS3中background-clip和background-origin的区别示例介绍
2014/03/10 HTML / CSS
八年级音乐教学反思
2014/01/09 职场文书
支教自我鉴定
2014/01/18 职场文书
目标管理责任书
2014/04/15 职场文书
同学会邀请函模板
2015/01/30 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
交通安全教育心得体会
2016/01/15 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
纯html+css实现Element loading效果
2021/08/02 HTML / CSS
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫