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 相关文章推荐
优化JavaScript脚本的性能的几个注意事项
Dec 22 Javascript
js刷新框架子页面的七种方法代码
Nov 20 Javascript
Javascript的各种节点操作实例演示代码
Jun 27 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
在axios中使用params传参的时候传入数组的方法
Sep 25 Javascript
详解Vue中使用Axios拦截器
Apr 22 Javascript
8 个有用的JS技巧(推荐)
Jul 03 Javascript
Vue-router 报错NavigationDuplicated的解决方法
Mar 31 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
php park、unpark、ord 函数使用方法(二进制流接口应用实例)
2010/10/19 PHP
php上传中文文件名乱码问题处理方案
2015/02/03 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
使用PHP实现下载CSS文件中的图片
2015/12/06 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
2018/04/04 PHP
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
JavaScript脚本语言在网页中的简单应用
2007/05/13 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
jQuery实现判断滚动条到底部
2015/06/23 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
微信小程序 数据访问实例详解
2016/10/08 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
seek引发的python文件读写的问题及解决
2019/07/26 Python
python单例设计模式实现解析
2020/01/07 Python
Django重设Admin密码过程解析
2020/02/10 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
芬兰攀岩、山地运动和户外活动用品购物网站:Bergfreunde
2016/10/06 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
采购经理岗位职责
2014/02/16 职场文书
优秀实习生感言
2014/03/01 职场文书
社区党务公开实施方案
2014/03/18 职场文书
8和9的加减法教学反思
2014/05/01 职场文书
世界读书日的活动方案
2014/08/20 职场文书
复兴之路展览观后感
2015/06/02 职场文书