Disable Enter Keypress on Form Submit & Change it into a tab instead

Question

How do I disable the key "enter keydown" on form submit button, because in a form, when I press "enter", it will submit my form.

I want my enter to become "tab" instead, so when I press enter e.g at

input text id="text_1", i want maybe change it focus to "small_1" (another textfield) , then if I press enter again at small_1, I want change it focus to big_1

and so on

How do I achieve this, I tried jquery autotab but it doesn't work like what I wanted.

score 0 · Accepted Answer · edited Jan 19 '23 at 17:21

0

Add a method to watch for the enter key being pressed (using jQuery):

$("#text_1").bind("keyup keypress", function(event){
    var code = event.keyCode || event.which; 
      if (code == 13)  {
          event.preventDefault();
          $('html, body').animate({
              scrollTop: $("#small_1").offset().top
          }, 2000);
          return false;
      }
});

$("#small_1").bind("keyup keypress", function(event){
      var code = event.keyCode || event.which; 
      if (code == 13)  {
          event.preventDefault();
          $('html, body').animate({
              scrollTop: $("#big_1").offset().top
          }, 2000);
          return false;
      }
});

You could set these up with JavaScript to detect the elements (and generate strings for the ids in a for loop) so you don't have to do these for each one, and it would also make it easier to add new ones.

edited Jan 19 '23 at 17:21

Anurag Srivastava

14,077
4
33
43

answered Aug 28 '14 at 14:36

Blubberguy22

1,344
1
17
29

I can't test your solution because when I press enter, it just simply form submit as my submit button is at the top of my page. inside
tag
– Baoky chen Aug 28 '14 at 14:51
This should be prevented by the `preventDefault()`. – Blubberguy22 Aug 28 '14 at 14:52
Sorry, I found the problem. Explained here: http://stackoverflow.com/questions/11235622/jquery-disable-form-submit-on-enter I'll edit my answer to fix this. – Blubberguy22 Aug 28 '14 at 15:07
I got a question, if I press enter at big_1, i wanna focus to small_1 , but I see your answer small_1 then small1.offset top, and enter still not disabled – Baoky chen Aug 28 '14 at 15:13
Sorry, that's a typo, I'll fix it. – Blubberguy22 Aug 28 '14 at 15:15
Could you please make a JSFiddle of what you are trying? – Blubberguy22 Aug 28 '14 at 15:17

Disable Enter Keypress on Form Submit & Change it into a tab instead

1 Answers1