网页中用回车键切换input焦点换行

原创于 2017-01-10 14:11:23 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js

笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在网页中通过JavaScript实现输入框之间的焦点切换，使得用户按下回车键时，焦点能自动移动到下一个input元素，提高用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function () { 
    $('input:text:first').focus(); //获取第一个焦点
    var $inp = $('input:text'); //定义全部焦点
    $inp.bind('keydown', function (e) {// 绑定事件
        var key = e.which;//定义按键
        if (key == 13) {//回车事件
            e.preventDefault();
            var nxtIdx = $inp.index(this) + 1;
            $(":input:text:eq(" + nxtIdx + ")").focus();
            if(nxtIdx==3){
                $('textarea').focus();
            }
        }
    });
});

在网页中,有时候会遇到这么一中需求,页面中上下有蛮多input输入框,输入一个点击一个麻烦,写一个回车一下就跳到下一个是个不错的做法,.
其中 $('input:text:first').focus(); 是把第一个文本框设为焦点位置,后面就定义全部的输入框,在后面的细节我就不一一说了, 相信大家看得懂,我就随便写写而已.