Question

我的表单中有多个文本字段，我希望当用户在一个文本字段中输入数据时按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; 
        }
    }
});

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

Answer 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

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

Answer 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版本！

Answer 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

Answer 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();
            }
        });`

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

5 个答案: