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"></script>
<script type="text/javascript">
$(document).ready(function(){
var EventUtil = {
addHandler: function(element,type, handler){
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type]=null;
}
},
removeHandle:function(element,type,handler){
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}
},
getEvent:function(event){
return event ? event:window.event;
},
getTarget:function(event){
return event.target || event.srcElement;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
};
var dom_text1=document.getElementById("text1");
var dom_text2=document.getElementById("text2");
var dom_text3=document.getElementById("text3");
function switchFocus(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
if(target.value.length==target.maxLength){
var form=target.form;
for(var i=0;i<form.elements.length;i++){
if(form.elements[i]==target){
form.elements[i+1].focus();
return;
}
}
}
}
EventUtil.addHandler(dom_text1,"keyup",switchFocus);
EventUtil.addHandler(dom_text2,"keyup",switchFocus);
EventUtil.addHandler(dom_text3,"keyup",switchFocus);
})
</script>
</head>
<body>
<form id="form1">
<input type="text" maxlength="3" id="text1"/>
<input type="text" maxlength="3" id="text2"/>
<input type="text" maxlength="3" id="text3"/>
</br>
<input type="text" />
</form>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》、《javascript面向对象入门教程》及《JavaScript数据结构与算法技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
Javascript中自动切换焦点实现代码
复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test javascript</title> <script type="text/javascript"> window.onload = function() { var EventUtil = { addhandler:function
-
JS实现方向键切换输入框焦点的方法
本文实例讲述了JS实现方向键切换输入框焦点的方法.分享给大家供大家参考.具体如下: 这里实现js方向键控制切换输入框焦点效果,不过无法兼容Firefox.当输入完毕按回车或按方向键可移动焦点至想要输入的文本框内,无需点击鼠标,对于经常录入数据的时候,这种功能可提高输入速度. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-input-cha-focus-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JavaScript判断表单为空及获取焦点的方法
本文实例讲述了JavaScript判断表单为空及获取焦点的方法.分享给大家供大家参考,具体如下: <%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" errorPage="" %> <html> <head> <meta http-equiv="Content
-
javascript实现按回车键切换焦点
前段时间学习了 HTML 和 CSS,对这方面产生了兴趣,也开始学习了 javascript 高级编程(第三版),这些天也一直在学,刚刚学到事件和表单脚本的内容.前几天,老师让编写一段代码:是在 javascript 表单中,用回车键和上下左右移动键使焦点从一个文本框移到上一个或下一个文本框中.应用目前为止学到的知识试着编写代码,在编写的过程中遇到了几个难点:取模计算:在函数内部用 this 和 arguments 找到触发事件:使用 addHandler() 方法为事件添加事件处理程序.在老师
-
js/jquery获取文本框输入焦点的方法
方法一. 复制代码 代码如下: function CheckForm() { if(document.form1.trainingName.value==""){ alert("培训班名称不能为空!"); document.form1.trainingName.focus(); return false;
-
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
-
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
-
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等特殊元素获取焦点 我
-
js实现获取焦点后光标在字符串后
主要介绍了js实现获取焦点后光标在字符串后,原理就是获得焦点后重新把自己复制粘帖一下,喜欢的朋友可以看看 复制代码 代码如下: var t=$("#"+id).val(); $("#"+id).val("").focus().val(t); //其原理就是获得焦点后重新把自己复制粘帖一下
-
通过JS来判断页面控件是否获取焦点
以一个TextBox为例,使用javascript来判断其是否获取到焦点. 其实很简单,正常的思路分为两个途径来看: 当文本框为服务端控件的时候,我们可以很简单地想到使用:if(TextBox1.Focused)来进行判断,使用TextBox1.Attributes.add('onfocus','要执行的方法'); 来绑定方法.当然,服务端的控件也是可以使用JS来进行操作的,不过,需要提醒注意的是服务端的ID与实际客户端的ID很可能是不一样的,所以在使用getelementbyid的时候需要注意