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 相关文章推荐
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
Sep 27 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
vue实现验证码输入框组件
Dec 14 Javascript
vue.js项目nginx部署教程
Apr 05 Javascript
深入理解令牌认证机制(token)
Aug 22 Javascript
解决vue v-for src 图片路径问题 404
Nov 12 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 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脚本的10个技巧(3)
2006/10/09 PHP
PHP4实际应用经验篇(3)
2006/10/09 PHP
dede全站URL静态化改造[070414更正]
2007/04/17 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
JavaScript中return false的用法
2015/03/12 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
微信小程序封装http访问网络库实例代码
2017/05/24 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
六个窍门助你提高Python运行效率
2015/06/09 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python实现Floyd算法
2018/01/03 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
实时获取Python的print输出流方法
2019/01/07 Python
python实现ip代理池功能示例
2019/07/05 Python
英国最大的海报商店:GB Posters
2018/03/20 全球购物
三方股份合作协议书
2014/10/13 职场文书
员工开除通知书
2015/04/25 职场文书
2016春季运动会前导词
2015/11/25 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
关于python爬虫应用urllib库作用分析
2021/09/04 Python
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏