js文本框焦点自动聚焦到下个文本框

最新推荐文章于 2024-08-14 16:12:44 发布

转载最新推荐文章于 2024-08-14 16:12:44 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luyuefeng/p/9729848.html

文章标签：

#javascript #前端 #ViewUI

本文介绍了一种使用JavaScript实现的当用户在一个限定长度的文本输入框中完成输入后，自动将焦点跳转到下一个输入框的方法。此技巧适用于如手机号码或验证码等场景，能够提升用户体验。

HTML：

<form>
　　<input type="text" name="text1" maxlength="3" size="3"/>-
　　<input type="text" name="text2" maxlength="3" size="3"/>-
　　<input type="text" name="text3" maxlength="3" size="3"/>
</form>

js：

function tabForward() {
    if(this.value.length == this.getAttribute('maxlength')) {
        for(let i = 0;i < this.form.elements.length;i ++) {
            if(this == this.form.elements[i]) {
                if(this.form.elements[i + 1]) {
                    this.form.elements[i + 1].focus();
                    return;
                }
            }
        }
    }
}
var form = document.forms[0];
var text1 = form.elements['text1'];
var text2 = form.elements['text2'];
var text3 = form.elements['text3'];
text1.addEventListener('keyup', tabForward, false); 
text2.addEventListener('keyup', tabForward, false);
text3.addEventListener('keyup', tabForward, false);