Move Cursor to next text Field pressing Enter

前端未结

关注

 5  1266

I have multiple text fields in my form and I want when user enters data in one text field and press enter that the cursor moves to another text-field which is next to curren

相关标签:

5条回答

自闭症患者

2020-12-24 09:53

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

It worked perfectly for me and supports almost every jquery versions!

0 讨论(0)

你的背包

2020-12-24 09:59
This should work:
```
$(".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 doesn't trigger keypress in all browsers, used keyup instead. Also attached eventlistener to each input instead of a wrapper.

A live demo at jsFiddle.

Your code with event delegation will also work with a slight change:
```
currentBoxNumber = textboxes.index(event.target);
```
this on above sentence would refer to the wrapper instead of the input, event.target refers to the actual element which fired the event.

A live demo at jsFiddle.
0 讨论(0)
发布评论:

提交评论
- 加载中...

借酒劲吻你

2020-12-24 10:02

Try this , as soon as you press it will move to next input field in the form, and when it reaches submit button it will submit the form

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

0 讨论(0)

暗喜

2020-12-24 10:04

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

0 讨论(0)

梦如初夏

2020-12-24 10:05

   $(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

0 讨论(0)