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 获取LI里的内容
Dec 17 Javascript
关于文本框的一些限制控制总结~~
Apr 15 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
JavaScript学习小结之使用canvas画“哆啦A梦”时钟
Jul 24 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
React Form组件的实现封装杂谈
May 07 Javascript
vue中轮训器的使用
Jan 27 Javascript
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
js利用递归与promise 按顺序请求数据的方法
Aug 30 Javascript
json字符串对象转换代码实例
Sep 28 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
用Flash图形化数据(二)
2006/10/09 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
PHP数据库表操作的封装类及用法实例详解
2016/07/12 PHP
php实用代码片段整理
2016/11/12 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
JsDom 编程小结
2011/08/09 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
2015/12/17 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
浅谈JS使用[ ]来访问对象属性
2016/09/21 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
三种方式实现瀑布流布局
2017/02/10 Javascript
vue.js轮播图组件使用方法详解
2018/07/03 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
[04:53]DOTA2英雄基础教程 祈求者
2014/01/03 DOTA
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python虚拟环境迁移方法
2019/01/03 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python删除文件夹下相同文件和无法打开的图片
2019/07/16 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python 爬取学信网登录页面的例子
2019/08/13 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
大学毕业典礼演讲稿
2014/09/09 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
Go语言 详解net的tcp服务
2022/04/14 Golang
前端框架ECharts dataset对数据可视化的高级管理
2022/12/24 Javascript