Menu
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 current text field. I visited some question but didn't 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 which i have tried an other thing that when the data entered in last text field then the form will submit on mouse click on the button not with enter press.
912
$("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!
125
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.
36
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
