<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
Consider this section for instance. There are two textboxes (anywhere on a page). I'm trying to set focus from the first input to the immediate next input when the user presses Enter key. How would I achieve this in JQuery?
<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text"/></td></tr></table>
</div>
Consider this section for instance. There are two textboxes (anywhere on a page). I'm trying to set focus from the first input to the immediate next input when the user presses Enter key. How would I achieve this in JQuery?
Share Improve this question asked Jan 10, 2017 at 12:49 Shanzid ShaihamShanzid Shaiham 691 gold badge3 silver badges15 bronze badges 9- 3 Just a small note, you know that this is counter-intuitive right? Normally using Enter within a form submits the forum, while pressing Tab usually brings you to the next field in the form. If you're going to change that behaviour, people might be confused. – Dimitri Mestdagh Commented Jan 10, 2017 at 12:52
- Yes yes, I'm fully aware of that. The enter press i mentioned was just to give an idea of when i'm trying to do this. – Shanzid Shaiham Commented Jan 10, 2017 at 12:55
-
If it's just about the idea and not the key use tabindex and the tab key !
<div> <table><tr><td><input type="text" tabindex="1"/></td></tr></table> </div> <div> <table><tr><td><input type="text" tabindex="2"/></td></tr></table> </div>– Gregoire Commented Jan 10, 2017 at 12:57 - tabindex will be your solution try it – Rahul Commented Jan 10, 2017 at 12:57
- 2 Possible duplicate of Activating next input field in form on enter – Sharmila Commented Jan 10, 2017 at 13:03
7 Answers
Reset to default 1Try this this will help you
$(document).ready(function() {
$('input').on("keypress", function(e) {
if (e.which == 13) {
var tab = $(this).attr("tabindex") + 1
$("input[tabindex=" + tab + "]").focus();
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>
<input type="text" tabindex="1" />
</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>
<input type="text" tabindex="2" />
</td>
</tr>
</table>
</div>You can use the .keypress event of jQuery.
HTML
<div>
<table><tr><td><input type="text" id="first" autofocus/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text" id="second"/></td></tr></table>
</div>
jQuery block
$(document).ready(function(){
$('#first').keypress(function(e){
if(e.keyCode ==13)
{
$('#second').focus();
}
})
});
Working DEMO : https://jsfiddle/ne403qyb/
Hope this helps!
$(document).ready(function() {
$('input[type=text]').keypress(function(e) {
if (e.keyCode == 13) {
if ($(this).attr('class') === "last") {
$('input[type=text]').eq(0).focus()
} else {
$('input[type=text]').closest('input[type=text]').focus();
}
}
});
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" />
<input type="text" class="last" />
</form>Try this :)
$(document).keypress(function(e) {
if(e.which == 13) {
var focusElem = document.activeElement;
var nextInput = $(focusElem).next().attr('id');
$("#" + nextInput).focus();
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input_1" />
<input type="text" id="input_2" />
<input type="text" id="input_3" />
<input type="text" id="input_4" /> $(document).on("keydown", "#Textbox1", function(e) {
var keyCode = e.keyCode || e.which;
if (keyCode == 13) {
e.preventDefault();
$("#Textbox2").focus();
}
});
Woking Fiddle
You can give all of you input elements a class(you can do the same by input text tag in case you do not have the input type text element in your document on which you do not want the focus ) and can find the next input element having same class.
$(".test").keypress(function(e) {
var inputs = $(".test");
if(e.which == 13) {
var $next = inputs.filter(":gt(" + inputs.index(this) + ")").first();
$next.focus();
}
});<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table><tr><td><input class ="test"type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>
<div>
<table><tr><td><input class="test" type="text"/></td></tr></table>
</div>You can try other alternative as jsfiddle,
HTML :
<div>
<table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
<div>
<table><tr><td><input type="text" class='inputs'/></td></tr></table>
</div>
JS :
$(document).on("input", "input", function(e){
if(e.which == 13){
$(this).next('.inputs').focus();
}
});