javascript实现自动切换焦点功能学习
当用户在表单中填写完当前字段后，能否自动将焦点跳转到下一个字段以方便用户输入？
为了增强易用性，加快数据输入的速度，可以在前一个文本框中的字符达到一定的设置的字符长度后（比如电话号码，身份证号等），用户输入完后，自动将焦点切换到下一个文本框中。可以使用JS来实现这一功能。
思路：首先，比较用户输入的值和文本框中的maxlength特性，确定是否达到了指定的长度(或者允许输入的最大长度)，如果这两个值相等，就去查找表单字段的集合，找到下一个文本框，将焦点切换到该文本框中。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS自动切换焦点</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;
}
},
/*
该方法返回Event对象的引用，考虑到IE中对事件的位置的不同，可以使用这个方法取得Event对象。
*/
getEvent: function(event){
return event ? event: window.event;
},
//返回事件的目标
getTarget: function(){
return event.target || event.srcElement;
},
/*通过比较用户输入的值与文本框的maxlength特性，确定是否达到最大长度
当两个值相等时，则需要查找表单字段的集合，查找到下一个文本框后将焦点切换
*/
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;
}
},
//处理字符编码
} var textarea = document.forms[0].elements["text"];
var button = document.getElementById("button"); (function(){
function tabForward(event){ //event事件对象传到事件处理程序中去
event = EventUtil.getEvent(event); //把event传给getEvent()方法
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 textName = document.getElementById("textName");
var textTel = document.getElementById("textTel");
var textID = document.getElementById("textID"); EventUtil.addhandler(textName,"keyup",tabForward); //在用户输入新字符后触发keyup事件
EventUtil.addhandler(textTel,"keyup",tabForward);
EventUtil.addhandler(textID,"keyup",tabForward);
})();
}
</script>
</head> <body>
<form>
<input type="text" name="Name" id="textName" maxlength="5" placeholder="您的姓名"/>
<input type="text" name="Tel" id="textTel" maxlength="11" placeholder="您的电话号码"/>
<input type="text" name="ID" id="textID" maxlength="5" placeholder="您的ID"/> </form>
</body>
</html>
对于这段代码中32到55行的作用，不懂，请看懂的人解释一下，thanks!
参考自：javascript高级程序设计。
javascript实现自动切换焦点功能学习的更多相关文章
- Javascript中自动切换焦点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title&g ...
- js进阶 9-9 html控件如何实现回车键切换焦点
js进阶 9-9 html控件如何实现回车键切换焦点 一.总结 一句话总结:在onkeydown事件中判断event对象的键位码,然后focus事件. 二.js进阶 9-9 html控件如何实现回车键 ...
- 获取bing.com的图片并在gnome3中设置自动切换
发现 bing.com 上的图片很好看,因此打算每天把 bing.com 的图片下载下来,用作桌面. 需要做的是两个部分,爬取图片到目录和设置目录图片为桌面背景并可以自动切换. 第一部分,下载图片,使 ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- JavaScript实现回车键切换输入框焦点
用JavaScript实现回车键切换输入框焦点的功能,不是回车换行哦,在Textarea中,回车换行是默认功能,不过若要在textarea中使用 回车切换输入框焦点功能的话,回车换行就要失效了,不过i ...
- tabs自动切换功能的实现
<html><head><!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href= ...
- 【温故而知新-Javascript】图片效果（图像震动效果、闪烁效果、自动切换图像）
1.当鼠标指针经过图像时图像震动效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- jquery input切换编辑和不可编辑模式,input自动获得焦点，遍历所有的子类标签
input切换编辑和不可编辑模式 在项目中我们经常会用到这样的效果,点击一下不可编辑的input 标签,变成可编辑的input标签.用法如下 <input type="text&quo ...
- javascript 实现类似百度联想输入，自动补全功能
js 实现类似百度联想输入,自动补全功能 方案一: search是搜索框id="search" //点击页面隐藏自动补全提示框 document.onclick = functi ...
随机推荐
- Flask—06-理解掌握flask数据模型(02)
数据模型 模型关系 一对多(使用最多) 一:学生(Student) 需要添加反向引用 多:文章(Article) 需要添加外键关联 一对一 一:学生(Student),主表 需要添加反向引用,在一对多 ...
- java中静态代理和动态代理
一.概述 代理是一种模式,提供了对目标对象的间接访问方式,即通过代理访问目标对象.如此便于在目标实现的基础上增加额外的功能操作,前拦截,后拦截等,以满足自身的业务需求,同时代理模式便于扩展目标对象功能 ...
- Webpack Tapable原理详解
directory - src - sim ---- 简单的模拟实现 - /.js$/ ---- 使用 代码已上传github, 地址 Detailed Webpack 就像一条生产线, 要经过一系列 ...
- ETO的公开赛T1《矿脉开采》题解（另类版）
这道题别看是签到题,写起来一点不简单 出题人的正解是双向搜索 我们把物品分成两半 每一半分别跑搜索 答案存下来,用个双指针合并即可 然后我构造了两组数据卡掉了他,不得不缩小数据范围 但我这里为什么要致 ...
- 用python爬取小说章节内容
在学爬虫之前, 最好有一些html基础, 才能更好的分析网页. 主要是五步: 1. 获取链接 2. 正则匹配 3. 获取内容 4. 处理内容 5. 写入文件 代码如下: #导入相关model fro ...
- JavaScript实现Tab切换
在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结. 效果图如下: 实现思路: 1. ...
- jquery图片滚动normalizy.css
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block; ...
- python构造二维列表以及排序字典
1. 构造二维列表: 比如我现在需要一个100*100的二维列表: a = [] for i in range(100): a.append([]) for j in range(100): a[i] ...
- 使用virtual安装Windows系列操作系统总结
最近在安装Windows操作系统的过程中,发现总是报错,无法安装成功,后来经过不断地摸索,发现根本的问题在于镜像,所以在以后的大文件传输下载后,一定要校验其MD5值是否与源文件一致,需要的朋友可以联系 ...
- py3.7.1下pyinstaller 的安装及打包 坑
实在无语了,写了个小程序,用pyinstaller打包,运行就出现这个pip install pywin32-ctypes.明明全部都已经安装了啊. 解决办法: 不要在工程设置里安装pyinstall ...