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>

赞 (0)

相关推荐

  • 通过JS来判断页面控件是否获取焦点

    以一个TextBox为例,使用javascript来判断其是否获取到焦点. 其实很简单,正常的思路分为两个途径来看: 当文本框为服务端控件的时候,我们可以很简单地想到使用:if(TextBox1.Focused)来进行判断,使用TextBox1.Attributes.add('onfocus','要执行的方法'); 来绑定方法.当然,服务端的控件也是可以使用JS来进行操作的,不过,需要提醒注意的是服务端的ID与实际客户端的ID很可能是不一样的,所以在使用getelementbyid的时候需要注意

  • js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性

    通过JS得到当前焦点的坐标 如下是得到当前焦点的坐标: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • js/jquery获取文本框输入焦点的方法

    方法一. 复制代码 代码如下: function CheckForm() {             if(document.form1.trainingName.value==""){                     alert("培训班名称不能为空!");                     document.form1.trainingName.focus();                     return false;          

  • JavaScript判断表单为空及获取焦点的方法

    本文实例讲述了JavaScript判断表单为空及获取焦点的方法.分享给大家供大家参考,具体如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <html> <head> <meta http-equiv="Content

  • JS实现方向键切换输入框焦点的方法

    JS实现方向键切换输入框焦点的方法

    本文实例讲述了JS实现方向键切换输入框焦点的方法.分享给大家供大家参考.具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox.当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu

  • JavaScript 关于元素获取焦点(隐藏元素与div)

    1,隐藏元素无法获取焦点 2,对于div等特殊元素获取焦点 关于元素获取焦点 body { margin: 32px; font-family: Verdana, sans-serif; font-size: 14px; } .title { font-size: 18px; font-weight: bolder;margin:40px 0; } 关于元素获取焦点: 1,隐藏元素无法获取焦点 下面有个隐藏的Input: 解决方法:先把元素显示,在获取焦点. 2,对于div等特殊元素获取焦点 我

  • javascript自动切换焦点控制效果完整实例

    本文实例讲述了javascript自动切换焦点控制的方法.分享给大家供大家参考,具体如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js"><

  • js实现获取焦点后光标在字符串后

    主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看 复制代码 代码如下: var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); //其原理就是获得焦点后重新把自己复制粘帖一下

  • javascript实现按回车键切换焦点

    前段时间学习了 HTML 和 CSS,对这方面产生了兴趣,也开始学习了 javascript 高级编程(第三版),这些天也一直在学,刚刚学到事件和表单脚本的内容.前几天,老师让编写一段代码:是在 javascript 表单中,用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中.应用目前为止学到的知识试着编写代码,在编写的过程中遇到了几个难点:取模计算:在函数内部用 this 和 arguments 找到触发事件:使用 addHandler() 方法为事件添加事件处理程序.在老师

  • JavaScript 回车 焦点切换

    复制代码 代码如下: <script language='javascript' for='document' event='onkeydown'> if(event&&event.srcElement){ srcEle=event.srcElement; if((event.keyCode||event.charCode)==13 && srcEle.tagName.toUpperCase()=='INPUT' && srcEle.type.t

随机推荐