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闭包的理解和实例
Aug 12 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
浅析JavaScript作用域链、执行上下文与闭包
Feb 01 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
利用Vue.js指令实现全选功能
Sep 08 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
javascript实现智能手环时间显示
Sep 18 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中单引号与双引号的区别分析
2014/08/19 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
javascript中的循环语句for语句深入理解
2014/04/04 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
深入浅析Node.js 事件循环
2015/12/20 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
jquery实现简单的瀑布流布局
2016/12/11 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
BootStrap 表单控件之单选按钮水平排列
2017/05/23 Javascript
jQuery EasyUI开发技巧总结
2017/09/26 jQuery
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
python实现网页自动签到功能
2019/01/21 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
干部职工纪律作风整改措施思想汇报
2014/10/11 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
海洋天堂观后感
2015/06/05 职场文书
HTML中的表格元素介绍
2022/02/28 HTML / CSS
Ruby处理CSV数据方法详解
2022/04/18 Ruby