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> < ...
随机推荐
- tooltip
/* 背景色 ; 字体颜色 ; 云,显示在上面 */ .tooltip-inner{ background-color: #FF0000; ForeColor:#0f0; IsBalloon:true ...
- mysql 常见的几个错误问题
Mysql常见的几个错误问题及解决方法: 1.问题: mysql DNS反解:skip-name-resolve 错误日志有类似警告: 点击(此处)折叠或打开 120119 16:26:04 [War ...
- centos python nginx uwsgi
先更新系统,并安装编译环境等等. yum update yum install python python-devel libxml2 libxml2-devel python-setuptools ...
- C++类构造析构调用顺序训练(复习专用)
//对象做函数参数 //1 研究拷贝构造 //2 研究构造函数,析构函数的调用顺序 //总结 构造和析构的调用顺序 #include "iostream" using namesp ...
- 多屏复杂动画CSS技巧三则(转载)
本文转载自: 经验分享:多屏复杂动画CSS技巧三则
- Java生成excel导出文件(使用poi+JXL)
1.使用poi生成文件 package com.mi.entity; import java.util.Date; public class Student { private int id; pri ...
- 夺命雷公狗—angularjs—10—angularjs里面的内置函数
我们没学一门语言或者框架,几乎里面都有各自的语法和内置函数,当然,强悍的angularjs也不例外,他的方法其实常用的没多少,因为很多都可以用源生jis几乎都能完成一大部分.. <!doctyp ...
- java web sql注入测试(2)---实例测试
以下篇幅,用一个简单的实例说明如何进行测试. 功能:根据用户NAME删除用户,采用的是SQL拼接的方式,核心代码部分如下: public static void deleteByName(String ...
- OpenCV cv::Mat类
using namespace cv; 1.Mat的声明: Mat m=Mat(rows, cols, type); Mat m=Mat(Size(width,height), type); type ...
- java 文件及流读取
在Java语言的IO编程中,读取文件是分两个步骤:1.将文件中的数据转换为流,2.读取流内部的数据.其中第一个步骤由系统完成,只需要创建对应的流对象即可,对象创建完成以后步骤1就完成了,第二个步骤使用 ...