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中自动切换焦点的更多相关文章
- javascript实现自动切换焦点功能学习
当用户在表单中填写完当前字段后,能否自动将焦点跳转到下一个字段以方便用户输入? 为了增强易用性,加快数据输入的速度,可以在前一个文本框中的字符达到一定的设置的字符长度后(比如电话号码,身份证号等),用 ...
- 在 Visual Studio 等编辑器/IDE中自动切换输入法，不需要手动的有没有？
使用Visual Studio写代码,经常遇到的一个问题就是切换中文输入法麻烦,输入完注释//,要切换到中文,输入完引号,要输入中文,然后还需要切换回来,有没有? 有时候中文输入法忽然失效有没有?明明 ...
- javascript中菜单栏切换案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js进阶 9-9 html控件如何实现回车键切换焦点
js进阶 9-9 html控件如何实现回车键切换焦点 一.总结 一句话总结:在onkeydown事件中判断event对象的键位码,然后focus事件. 二.js进阶 9-9 html控件如何实现回车键 ...
- 深入理解javascript中的焦点管理
× 目录 [1]焦点元素 [2]获得焦点 [3]失去焦点[4]焦点事件 前面的话 焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文 ...
- 修复duilib CEditUI控件和CWebBrowserUI控件中按Tab键无法切换焦点的bug
转载请说明原出处,谢谢~~:http://blog.csdn.net/zhuhongshu/article/details/41556615 在duilib中,按tab键会让焦点在Button一类的控 ...
- JavaScript实现回车键切换输入框焦点
用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...
- jquery input切换编辑和不可编辑模式,input自动获得焦点，遍历所有的子类标签
input切换编辑和不可编辑模式 在项目中我们经常会用到这样的效果,点击一下不可编辑的input 标签,变成可编辑的input标签.用法如下 <input type="text&quo ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
随机推荐
- 使用dbms_system追踪其它session
dbms_system是内部包,建议在官方指导下使用该包. SQL> desc dbms_system PROCEDURE ADD_PARAMETER_VALUE Argument Name T ...
- PostgreSQL wiki
https://wiki.postgresql.org/wiki/Main_Page https://wiki.postgresql.org/wiki/Converting_from_other_Da ...
- Python学习总结17：exec和eval执行求值字符串
有些时候可能会需要动态地创造Python代码,然后将其作为语句执行或作为表达式计算. 1. exec >>>exec "print 'Hello, world!'" ...
- c标签 总结
JSTL标签用法 关键字:JSTL标签.<c:choose>.<c:forEach>.<c:forTokens>.<c:if>.<c:import ...
- HDU 4064 Carcassonne（插头DP）（The 36th ACM/ICPC Asia Regional Fuzhou Site —— Online Contest）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4064 Problem Description Carcassonne is a tile-based ...
- CCF真题之网络延时
201503-4 问题描述 给定一个公司的网络,由n台交换机和m台终端电脑组成,交换机与交换机.交换机与电脑之间使用网络连接.交换机按层级设置,编号为1的交换机为根交换机,层级为1.其他的交换机都连接 ...
- scala2.10.x case classes cannot have more than 22 parameters
问题 这个错误出现在case class参数超出22个的时候. case classes cannot have more than 22 parameters 在scala 2.11.x版本以下时c ...
- Maven打jar包
<plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...
- R12 供应商SQL
-- 供应商主表数据: SELECT ass.vendor_id vendor_id, ass.party_id party_id, ass.segment1 vendor_code, ass.ven ...
- PAT乙级 1016. 部分A+B (15) C语言实现
1016. 部分A+B (15) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 正整数A的“DA(为1位整数)部 ...