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

Shanzid Shaiham
  • 69
  • 2
  • 15
  • 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. – g00glen00b Jan 10 '17 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 Jan 10 '17 at 12:55
  • If it's just about the idea and not the key use **tabindex** and the tab key ! `
    `     – Gregoire Jan 10 '17 at 12:57
  • tabindex will be your solution try it – Rahul Jan 10 '17 at 12:57
  • @VforVendetta - it's not. He said `enter`, not `tab`. –  Jan 10 '17 at 12:58
  • @JayMee he said *The enter press i mentioned was just to give an idea of when i'm trying to do this.* So **enter** is just a key as **tab** – Gregoire Jan 10 '17 at 12:59
  • For the sake of the initial question asked, lets just assume it is the Enter keypress I'm looking for. – Shanzid Shaiham Jan 10 '17 at 13:01
  • 2
    Possible duplicate of [Activating next input field in form on enter](http://stackoverflow.com/questions/19610357/activating-next-input-field-in-form-on-enter) – Sharmila Jan 10 '17 at 13:03
  • @Shanzid As you wish ^^ HTML provide built-in facilities, no need for code if you use **tab** I'll still leave a demo : https://jsfiddle.net/99ho0sqr/ – Gregoire Jan 10 '17 at 13:04

7 Answers7

1

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.net/ne403qyb/

Hope this helps!

David R
  • 14,711
  • 7
  • 54
  • 72
  • This wouldn't be really efficient in my case since my page would have around 20 textboxes and following this approach would mean that I'd have to assign the function to each and every textbox. – Shanzid Shaiham Jan 10 '17 at 12:59
  • `$(this).next('input.text').focus();` will do the trick. Check the updated fiddle here => https://jsfiddle.net/ne403qyb/1/ – David R Jan 10 '17 at 13:10
  • the input elements are not siblings. The .next() would not work in that case. – Shanzid Shaiham Jan 10 '17 at 13:42
1

$(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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
 
  <input type="text"  />
  
  <input type="text" class="last" />
</form>
Jignesh Hirpara
  • 135
  • 1
  • 5
1

Try 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.com/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>
vijay
  • 926
  • 7
  • 15
0
 $(document).on("keydown", "#Textbox1", function(e) {
      var keyCode = e.keyCode || e.which; 
      if (keyCode == 13) {                       
        e.preventDefault(); 
        $("#Textbox2").focus();
      }
    });

Woking Fiddle

Aravindh Gopi
  • 2,083
  • 28
  • 36
0

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.com/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" />
Idoshin
  • 363
  • 2
  • 17
0

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.com/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>
Deep
  • 9,594
  • 2
  • 21
  • 33
0

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();
   }
});
Rahul
  • 18,271
  • 7
  • 41
  • 60