html输入框自动跳转下一个输入框效果

最新推荐文章于 2024-03-29 19:05:28 发布

小陆5号

最新推荐文章于 2024-03-29 19:05:28 发布

阅读量1.8k

点赞数 3

分类专栏： input 文章标签： html5 js

本文链接：https://blog.csdn.net/Liang_666/article/details/121708664

版权

input 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

html部分：

 <input id="inpo1" type="text" maxlength="4" name="inp1" onkeyup="return inp1_onkeyup()">

<input id="inpo2" type="text" maxlength="4" name="inp2" onkeyup="return inp2_onkeyup()">

<input id="inpo3" type="text" maxlength="4" name="inp3" onkeyup="return inp3_onkeyup()">

<input id="inpo4" type="text" maxlength="4" name="inp4" onkeyup="return inp4_onkeyup()">

js部分：

  function inp1_onkeyup(){
        if(document.getElementById('inpo1').value.length==4){
            document.getElementById('inpo2').focus()
        }
    }
    function inp2_onkeyup(){
        if(document.getElementById('inpo2').value.length==4){
            document.getElementById('inpo3').focus()
        }
    }
    function inp3_onkeyup(){
        if(document.getElementById('inpo3').value.length==4){
            document.getElementById('inpo4').focus()
        }
    }