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 相关文章推荐
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
Dec 08 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
onmouseover事件和onmouseout事件全面理解
Aug 15 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
vue 文件目录结构详解
Nov 24 Javascript
微信小程序云开发之使用云数据库
May 17 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 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
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php readfile下载大文件失败的解决方法
2017/05/22 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
javascript知识点收藏
2007/02/22 Javascript
javascript 函数式编程
2007/08/16 Javascript
javascript来定义类的规范小结
2010/11/19 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
nodejs中实现路由功能
2014/12/29 NodeJs
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
2015/10/01 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
关于cookie的初识和运用(js和jq)
2016/04/07 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
vue一步步实现alert功能
2017/07/05 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
Vue.js中的组件系统
2019/05/30 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python 爬虫百度地图的信息界面的实现方法
2019/10/27 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Yummie官方网站:塑身衣和衣柜必需品
2019/10/29 全球购物
贷款委托书怎么写
2014/08/02 职场文书
升职感谢信
2015/01/22 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
秋菊打官司观后感
2015/06/03 职场文书
小学运动会宣传稿
2015/07/23 职场文书
企业文化学习心得体会
2016/01/21 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电