Handling the "Enter" / "Return" key in Chrome.

Question

Hello,

I have an AJAX-y type page. When the user clicks "GO" I need to execute a specific javascript function. I also want to simulate the "GO" click when a user hits "Enter" or "Return. Please note that I do not want to "submit" the page. The reason why is because i am doing everything via JavaScript.

To handle the "Enter" / "Return" key press in IE and FireFox, I am using the following code:

$(document).ready(function () {  
  $('#root').keypress(function(e) { 
    if (e.keyCode == '13') { 
      goButton(); 
    } 
  });
});

Unfortunately, this code is not working in Chrome. The goButton() function gets called. The problem though is the page gets submitted. What am I doing wrong?

Answer 1

Try returning false directly after your if statement (which calls goButton()).

See an example here: Using jQuery to prevent form submit when enter is pressed

Answer 2

Assuming you have a form:

$('#theForm').submit(function(e){
    e.preventDefault();
    goButton();
    return false; // just to be sure.
});

You need to prevent the submit event from the form, which gets called when the form has focus and a user presses enter.

Answer 3

I agree with NGerrissen, that is the best approach. However, to better adapt to your code you can just add the stops to your current function:

$(document).ready(function () {  
  $('#root').keypress(function(e) { 
    if (e.keyCode == '13') { 
      e.preventDefault();//Stops the default action for the key pressed
      goButton(); 
      return false;//extra caution, may not be necessary
    } 
  });
});