javascript實現(xiàn)依次輸入input自動定焦

更新時間：2014年12月23日 08:51:37 投稿：hebedich

這篇文章主要介紹了javascript實現(xiàn)依次輸入input自動定焦的方法及示例代碼，非常實用，這里推薦給小伙伴們

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

代碼很簡單，功能非常實用，小伙伴們美化下就可以用到自己項目中了，是不是很炫酷

您可能感興趣的文章:

js寫一個彈出層并鎖屏效果實現(xiàn)代碼
js實現(xiàn)一個彈出層并鎖屏效果是每一網(wǎng)友所期望的效果，于是搜集整理一番，把代碼曬出來和大家分享
2012-12-12
javascript中比較字符串是否相等的方法
使用js比較字符串是否相等的方法有很多，在本文為大家介紹一個從外國網(wǎng)站看到的方法，感興趣的朋友可以參考下哈，希望對大家學習js有所幫助
2013-07-07
淺談JavaScript中運算符的優(yōu)先級
這篇文章主要給大家簡單介紹了JavaScript中運算符的優(yōu)先級的相關問題，十分的實用，有需要的小伙伴可以參考下。
2015-07-07
微信小程序商城項目之購物數(shù)量加減(3)
這篇文章主要為大家詳細介紹了微信小程序商城購物數(shù)量加減功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
ES6入門教程之let和const命令詳解
最近做項目的過程中，使用到了ES6，因為之前很少接觸，所以使用起來還不夠熟悉。通過學習網(wǎng)上的教程后覺著有必要整理下遇到的let和const命令，所以這篇文章主要給大家介紹了ES6中l(wèi)et和const命令的相關資料，需要的朋友可以參考下。
2017-05-05
這篇文章主要介紹了javascript模擬實現(xiàn)ajax加載框的方法,實例簡述了其實現(xiàn)過程,方法簡單實用,需要的朋友可以參考下
2014-10-10