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 相关文章推荐
复制小说文本时出现的随机乱码的去除方法
Sep 07 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
javascript里使用php代码实例
Dec 13 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
记一次用vue做的活动页的方法步骤
Apr 11 Javascript
了解在JavaScript中将值转换为字符串的5种方法
Jun 06 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 Javascript
解决vue自定义组件@click点击失效问题
Apr 30 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树的代码,可以嵌套任意层
2006/10/09 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
如何用php获取文件名后缀
2013/06/09 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
XENON基于JSON变种
2010/07/27 Javascript
页面回到顶部的三种实现(锚标记,js)
2012/10/01 Javascript
Javascript代码在页面加载时的执行顺序介绍
2013/05/03 Javascript
js实现无缝循环滚动
2020/06/23 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
详解jQuery选择器
2016/12/21 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
2019/03/05 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
浅谈pandas中Dataframe的查询方法([], loc, iloc, at, iat, ix)
2018/04/10 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
如何通过python画loss曲线的方法
2019/06/26 Python
基于pytorch 预训练的词向量用法详解
2020/01/06 Python
Python气泡提示与标签的实现
2020/04/01 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
CSS代码检查工具stylelint的使用方法详解
2021/03/27 HTML / CSS
公司薪酬管理制度
2014/01/31 职场文书
质量安全标语
2014/06/07 职场文书
个人合伙协议书范本
2014/10/14 职场文书
感恩主题班会教案
2015/08/12 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js