Javascript中自动切换焦点实现代码
更新时间：2012年12月15日 14:55:44 作者：
本文提供Javascript中自动切换焦点实例代码,需要了解的朋友可以参考下
复制代码 代码如下:
<!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系列（25）：设计模式之单例模式详解
这篇文章主要介绍了深入理解JavaScript系列（25）：设计模式之单例模式详解,本文给出了多种单例模式的实现方式,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了ReactJS的Hello world程序编写及其相关知识,React是Facebook开发并开源的JS框架,人气在当下急剧攀升,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了关于JavaScript限制字数的输入框在项目过程中容易遇到的各种坑的汇总，非常的详细，有需要的小伙伴可以参考下2016-08-08
在面向对象的程序设计里,一般都提供了实现队列(queue)和堆栈(stack)的方法,而对于JS来说,我们可以实现数组的相关操作,来实现队列和堆栈的功能,看下面的相关介绍.2016-01-01
这篇文章主要简单介绍了JavaScript函数节流的相关知识，有相同需求的小伙伴们可以仔细阅读下2014-12-12
下面小编就为大家带来一篇JavaScript中匿名函数的用法及优缺点详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了uniapp 实现录音上传功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-09-09
HTML复选框和单选框 checkbox和radio事件介绍
checkbox 和 radio的事件选择一度让我很迷惑,开始以我对js的理解，我觉得change事件应该是最合理的，可惜啊ie下change事件是在改变后焦点离开时才触发2012-12-12
这篇文章主要介绍了JavaScript中的anchor()方法使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
这篇文章主要介绍了javascript类型转换的使用方法,包括转换为字符串、转换为数字、转换为布尔值、转换为对象使用方法，大家参考使用吧2014-02-02
最新评论