编程 Javascript

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自动定焦

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

浏览器常用高宽的jquery插件

Feb 24 Javascript

js图片自动轮播代码分享(js图片轮播)

May 06 Javascript

CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法

May 12 Javascript

使用AngularJS实现表单向导的方法

Jun 19 Javascript

Vue表单实例代码

Sep 05 Javascript

使用vue.js2.0 + ElementUI开发后台管理系统详细教程（二）

Jan 21 Javascript

关于javascript作用域的常见面试题分享

Jun 18 Javascript

vue2.x+webpack快速搭建前端项目框架详解

Nov 30 Javascript

jsonp跨域获取数据的基础教程

Jul 01 Javascript

小程序获取周围IBeacon设备的方法

Oct 31 Javascript

关于vue 项目中浏览器跨域的配置问题

Nov 10 Javascript

解决iView Table组件宽度只变大不变小的问题

Nov 13 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