将光标移动到下一个文本字段按 Enter答案

【问题标题】：Move Cursor to next text Field pressing Enter将光标移动到下一个文本字段按 Enter
【发布时间】：2014-05-16 05:30:57
【问题描述】：

我的表单中有多个文本字段，当用户在一个文本字段中输入数据并按 Enter 键时，我希望光标移动到当前文本字段旁边的另一个文本字段。我访问了一些问题，但没有发现它们有用。

$("#username").keypress(function (event) {
    alert("inside function");
    if(event.keyCode == 13) { 
        textboxes = $("input.username");
        debugger;
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1];
            nextBox.focus();
            nextBox.select();
            event.preventDefault();
            return false; 
        }
    }
});

这是我尝试过的代码另一件事是，当在最后一个文本字段中输入数据时，表单将在鼠标单击按钮时提交，而不是按下回车键。

【问题讨论】：

@Teemu 不工作我累了 :(

标签： javascript jquery html

【解决方案1】：

这应该可行：

$(".username").keyup(function (event) {
    if (event.keyCode == 13) {
        textboxes = $("input.username");
        currentBoxNumber = textboxes.index(this);
        if (textboxes[currentBoxNumber + 1] != null) {
            nextBox = textboxes[currentBoxNumber + 1];
            nextBox.focus();
            nextBox.select();
        }
        event.preventDefault();
        return false;
    }
});

ENTER 不会在所有浏览器中触发keypress，而是使用keyup。还将 eventlistener 附加到每个 input 而不是包装器。

A live demo at jsFiddle.

您的带有事件委托的代码也可以稍作改动：

currentBoxNumber = textboxes.index(event.target);

上面句子中的this 指的是包装器而不是input，event.target 指的是触发事件的实际元素。

A live demo at jsFiddle.

【讨论】：

您的 js 代码和小提琴正在工作，但我也希望我的表单不会在按 Enter 键时提交，因为当我按 Enter 键移动到下一个文本字段时，我的表单将提交我将如何防止这种情况
在 ENTER 的任何情况下都从 keyup 处理程序返回 false。请查看编辑。
我刚刚在Linux的Firefox 44.0中尝试过这个，发现那里的表单提交是在keydown上触发的，这意味着提交事件在keyup事件推进到下一个字段有机会触发之前触发.将 keyup 更改为 keydown 解决了问题。尚未进行任何其他跨浏览器测试。
keyup 的文档说，“可取消：否”和“默认操作：无”。 keydown 具有这些属性。所以，看起来我为此选择了一个不正确的事件，keydown 是当前使用的事件。不过，链接的小提琴在 FF43 + Win7 中有效（也可以使用表单）。
@sabertababaeyazdi 没有？小提琴仍然对我有用。请注意，sn-p 从 2014 年开始使用 jQuery 1.11.0，并且没有委托。在委托情况下，您需要textboxes.index(event.target)。

【解决方案2】：

试试这个，一旦你按下它就会移动到表单中的下一个输入字段，当它到达提交按钮时它会提交表单

            <html>
     <head>
       <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script type='text/javascript'>
        $(document).ready(function(){
            $('#myForm input').keydown(function(e){
             if(e.keyCode==13){       

                if($(':input:eq(' + ($(':input').index(this) + 1) + ')').attr('type')=='submit'){// check for submit button and submit form on enter press
                 return true;
                }

                $(':input:eq(' + ($(':input').index(this) + 1) + ')').focus();

               return false;
             }

            });
        });
        </script>
     </head>
     <body>
      <form action="" id="myForm"  >
        <input type='text'  name='firstField'>
            <input type='text' name='secondField'>

            <input type='text' name='secondField'>

            <input type='text' name='secondField'>
        <input type='submit'>
      </form>
     </body>
    </html>

【讨论】：

【解决方案3】：

$("input").keypress(function(e) {
  if (e.which == 13) {
    var index = $("input[type='text']").index(this);
    $("input[type='text']").eq(index + 1).focus();
    e.preventDefault();
  }
});

它非常适合我，几乎支持所有 jquery 版本！

【讨论】：

简短而简单，对当前文本框没有任何紧张感，在文本框和ao之后...

【解决方案4】：

   $(document).ready(function () {

    $('input:text:first').focus();

    $('#txtLoginID').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtLoginID').val() == "") {
                return false;
            }
            else {
                $('#txtPassword').focus();

            }
        }
    });


    $('#txtPassword').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtPassword').val() == "") {
                return false;
            }
            else {
                $('#txtFirstName').focus();

            }
        }
    });

    $('#txtFirstName').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtFirstName').val() == "") {
                return false;
            }
            else {
                $('#txtLastName').focus();

            }
        }
    });

    $('#txtLastName').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtLastName').val() == "") {
                return false;
            }
            else {
                $('#txtPhoneNo').focus();

            }
        }
    });


    $('#txtPhoneNo').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtPhoneNo').val() == "") {
                return false;
            }
            else {
                $('#txtEmailID').focus();

            }
        }
    });

    $('#txtEmailID').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtEmailID').val() == "") {
                return false;
            }
            else {
                $('#txtAddress').focus();

            }
        }
    });

    $('#txtAddress').keypress(function (e) {
        if (e.keyCode == 13) {

            if ($('#txtAddress').val() == "") {
                return false;
            }
            else {
                $('#btnSignUp').focus();

            }
        }
    });

you can do for text ,password,textarea its a long process but no confusion

【讨论】：

【解决方案5】：

  **This code was perfectly worked in  cursor move to next contenteditable td and textboxes and dropdown list within td ,and datepicker within textbox by reference in class strong text**

    `var $input = $('.EnterlikeTab');
        $input.bind('keydown', function (e) {
            if (e.which == 13) {
                e.preventDefault();
                var nxtIdex = $input.index(this) + 1;
                $(".EnterlikeTab:eq(" + nxtIdex + ")").focus();
            }
        });`

【讨论】：