javascript实现依次输入input自动定焦


Posted in Javascript onDecember 23, 2014
<html> 

<head> 

<script type="text/javascript"> 

    function moveNext(object,index){ 

        if(object.value.length==4){ 

            document.forms[0].elements[index+1].focus(); 

        } 

    } 

    function showResult(){ 

        var f=document.forms[0]; 

        var result=""; 

        for(var i=0;i<4;i++){ 

            result+=f.elements[i].value; 

        } 

        alert(result); 

    }

</script>

</head> 

<body onload="document.forms[0].elements[0].focus();"> 

    <form> 

        <input type="text" size="3" maxlength="4" onkeyup="moveNext(this,0);"> 

        <input type="text" size="3" maxlength="4" onkeyup="moveNext(this,1);"> 

        <input type="text" size="3" maxlength="4" onkeyup="moveNext(this,2);"> 

        <input type="text" size="3" maxlength="4" onkeyup="moveNext(this,3);"> 

        <input type="button" value="显示" onclick="showResult();"> 

    </form> 

</body> 

</html>

javascript实现依次输入input自动定焦

javascript实现依次输入input自动定焦

javascript实现依次输入input自动定焦

javascript实现依次输入input自动定焦

代码很简单,功能非常实用,小伙伴们美化下就可以用到自己项目中了,是不是很炫酷

Javascript 相关文章推荐
innerText和innerHTML 一些问题分析
May 18 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
简洁Ajax函数处理(示例代码)
Nov 15 Javascript
js图片预加载示例
Apr 30 Javascript
javascript实现移动端上的触屏拖拽功能
Mar 04 Javascript
js编写三级联动简单案例
Dec 21 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
May 01 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
使用原生JS实现弹出层特效
Dec 22 #Javascript
jQuery基础知识小结
Dec 22 #Javascript
jQuery异步获取json数据方法汇总
Dec 22 #Javascript
jQuery的观察者模式详解
Dec 22 #Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 #Javascript
sails框架的学习指南
Dec 22 #Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 #Javascript
You might like
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
JavaScript函数定义的常见注意事项小结
2014/09/16 Javascript
简述JavaScript对传统文档对象模型的支持
2015/06/16 Javascript
jquery实现未经美化的简洁TAB菜单效果
2015/08/28 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
2016/09/20 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
javascript创建元素和删除元素实例小结
2019/06/19 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
基于使用paramiko执行远程linux主机命令(详解)
2017/10/16 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
pyqt 多窗口之间的相互调用方法
2019/06/19 Python
python多进程并行代码实例
2019/09/30 Python
pytorch 查看cuda 版本方式
2020/06/23 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
入党申请人的自我鉴定
2013/12/01 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书
Redis分布式锁Redlock的实现
2021/08/07 Redis
Vue组件更新数据v-model不生效的解决
2022/04/02 Vue.js
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python