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> < ...
随机推荐
- 一次数据库hang住的分析过程
现象: 普通用户和sysdba都无法登陆,业务中断 分析过程: 1.先做hanganalyze和systemstate dump $sqlplus -prelim "/as sysdba&q ...
- c# 排序算法总结
/// <summary> /// 冒泡排序法1 /// </summary> /// <param name="list"></para ...
- wampserver下修改mysql root用户的登录密码
1.安装好wamp后,运行WampServer程序,进入MYSQL控制台; 2.进入控制台后,提示输入密码(不用输入任何密码,因为密码为空),按回车键进入; 3.输入“USE mysql;”然后回车, ...
- Android图像处理之Bitmap类(zz)
Bitmap是Android系统中的图像处理的最重要类之一.用它可以获取图像文件信息,进行图像剪切.旋转.缩放等操作,并可以指定格式保存图像文件.本文从应用的角度,着重介绍怎么用Bitmap来实现这些 ...
- MD5和DES加密方法
/// <summary> /// MD5加密 /// </summary> /// <param name=&q ...
- html 圆角边框
<input style="border-radius: 10px;" type="submit" value="确认"> bo ...
- Spring的2个思想
IOC:控制反转 反转:获取依赖对象的方式被反转了 控制反转是关于一个对象如何获取他所依赖的对象的引用,反转是指责任的反转. (1)对象实例化问题(Spring完成) 传统的依赖方式:程序员实例化 ( ...
- App架构设计学习（一）---- 接口的设计
一.哎,最近换了家工作,结果工作很出的我意外,没有干熟悉的根据需求写代码,反而让我一个小菜鸟去重构一下App的架构(他们公司的app,已经上线了1.0版本了),没办法,只有硬着头皮去先学习学习,再总结 ...
- paper 53 ：深度学习（转载）
转载来源:http://blog.csdn.net/fengbingchun/article/details/50087005 这篇文章主要是为了对深度学习(DeepLearning)有个初步了解,算 ...
- sql ROUND() 函数三个参数的含义
ROUND的格式:ROUND(p1,p2,p3),其作用是取四舍四入值P1:要被四舍五入的数字P2:保留的小数位数P3:如果为0或不输入,则表示进P1进入四舍五入,如ROUND(123.86,1) = ...