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> < ...
随机推荐
- php 调用 java 接口
php 需要开启 curl模块 /** HTTP 请求函数封装*/function http_request_cloudzone($url, $data){ //var_dump($url." ...
- iOS6：在你的App内使用Passbook
前言 这是一篇翻译,感谢Jonathan Tang. 原文地址:iOS 6 Tutorial: Integrating Passbook into Your Applications 另外,看到另一篇 ...
- Java内存分配全面浅析
本文将由浅入深详细介绍Java内存分配的原理,以帮助新手更轻松的学习Java.这类文章网上有很多,但大多比较零碎.本文从认知过程角度出发,将带给读者一个系统的介绍. 进入正题前首先要知道的是Java程 ...
- devexpress13学习系列（三）PDFViewer（3）
PdfDocumentProperties Class 该类,用来显示载入的pdf文件的属性,包括: Name Description Application Indicates the appl ...
- kafka 0.8.x producer Example(scala)
Producer 最简配置 metadata.broker.list参数指定broker地址,这里不需要填上所有的broker地址,但是如果只写一个,这个broker挂掉后就无法往topic中写入信息 ...
- shp图层创建
IField,IFieldEdit,IFields,IFieldsEdit,IGeometryDef,IGeometryDefEdit接口 (2013-05-06 20:40:27) 转载▼ 标签: ...
- 夺命雷公狗---DEDECMS----6快速入门之总结篇
我们dedecms四大表分别是: dede_channeltype(模型表) dede_arctype(栏目表) dede_archives(文章主表) dede_addonXXXX(附加表) 使用d ...
- PAT乙级 1024. 科学计数法 (20)
1024. 科学计数法 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 HOU, Qiming 科学计数法是科学家用来表示很 ...
- co css规范
CSS 编码规范 1. 文件组织 (建议试试LESS) 1.1 CSS 与 HTML CSS 一律写在 CSS 文件中,原则上不写内联样式. CSS 文件命名由小写字母.下划线(_)组成. CSS 文 ...
- SDK Manager failed to install 'java.exe' locking directory
转自:http://stackoverflow.com/questions/13587478/sdk-manager-failed-to-install-java-exe-locking-direct ...