Geek Answers Handbook

Move cursor to next text field, press Enter

I have several text fields in my form, and I want the user to enter data in one text field and press enter so that the cursor moves to another text field that is next to the current text field. I visited some questions, but did not find them useful.

$("#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; } } });

this is my code that I tried another thing, when the data entered in the last text field, then the form will be sent by clicking on the button that is not pressed.

+7
javascript jquery html
source share
4 answers

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 does not start keypress in all browsers; instead, keyup used. Also added an eventlistener for each input instead of a wrapper.

Live demo in jsFiddle .

Your event delegation code will also work with minor changes:

 currentBoxNumber = textboxes.index(event.target);

this in the above sentence refers to a wrapper instead of input , event.target refers to the actual element that triggered the event.

Live demo in jsFiddle .

+9
source share

Try this, as soon as you click, it will move to the next input field on the form, and when it reaches the 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>
+3
source share
  $(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
source share
  **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
source share

More articles:


All Articles