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 相关文章推荐
User Scripts: Video Download by User Scripts
May 14 Javascript
javascript下function声明一些小结
Dec 28 Javascript
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
input禁止键盘及中文输入,但可以点击
Feb 13 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
JS获取月的第几周和年的第几周实例代码
Dec 05 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
vue3.0中的双向数据绑定方法及优缺点
Aug 01 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
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 file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php session实现多级目录存放实现代码
2016/02/03 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
多个jquery.datatable共存,checkbox全选异常的快速解决方法
2013/12/10 Javascript
alert和confirm功能介绍
2014/05/21 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
ES6字符串的扩展实例
2020/12/21 Javascript
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python科学计算之Pandas详解
2017/01/15 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
windows下python和pip安装教程
2018/05/25 Python
和孩子一起学习python之变量命名规则
2018/05/27 Python
python爬虫实例详解
2018/06/19 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
python 如何将office文件转换为PDF
2020/09/22 Python
python实现简单的学生管理系统
2021/02/22 Python
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
速卖通欧盟:Aliexpress EU
2020/08/19 全球购物
数据库的约束含义
2012/09/09 面试题
党员批评与自我批评
2014/02/12 职场文书
企业安全生产承诺书
2014/05/22 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
商家认证委托书格式
2014/10/16 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
解决redis批量删除key值的问题
2022/03/23 Redis
Nginx配置之禁止指定IP访问
2022/05/02 Servers