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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
table行随鼠标移动变色示例
May 07 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
微信小程序网络请求的封装与填坑之路
Apr 01 Javascript
vue移动端微信授权登录插件封装的实例
Aug 28 Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
Dec 26 Javascript
javascript实现前端成语点击验证
Jun 24 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
短波的认识
2021/03/01 无线电
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
一个简单的PHP入门源程序
2006/10/09 PHP
php5数字型字符串加解密代码
2008/04/24 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP简单实现“相关文章推荐”功能的方法
2014/07/19 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
AngularJS实现网站换肤实例
2021/02/19 Javascript
原生js实现倒计时--2018
2017/02/21 Javascript
React中的render何时执行过程
2018/04/13 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
python中pycurl库的用法实例
2014/09/30 Python
python查看列的唯一值方法
2018/07/17 Python
python实现梯度下降算法
2020/03/24 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Python Json数据文件操作原理解析
2020/05/09 Python
Pycharm连接gitlab实现过程图解
2020/09/01 Python
Harrods英国:世界领先的奢侈品百货商店
2020/09/23 全球购物
建龙钢铁面试总结
2014/04/15 面试题
商务邀请函范文
2014/01/14 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
社区义诊通知
2015/04/24 职场文书
红色经典观后感
2015/06/18 职场文书
车间安全生产管理制度
2015/08/06 职场文书
vue elementUI批量上传文件
2022/04/26 Vue.js