jQuery keyup and 'enter' in Safari

Question

I am using jQuery and want to make it possible for the user to hit enter after entering data into a search field to start the search.

I'm using the following code:

        $('#textSearch').keyup(function (event) {
            if (event.keyCode == '13') {
                doSearch();
            }
            return false;
        });

It works perfect in Firefox and IE but not at all in Safari. What happens is that the form is being submitted when I hit enter in safari and that is not what I want.

Adding onsubmit="return false;" to the form works but is not an option as the form tag is on a masterpage of an asp.net page and I need the form to be submitted on other pages.

Is there a way to also get this feature working in Safari?

EDIT: I also tried to just show an alert instead of the doSearch() function. The alert shows up fine but after that the form is being submitted.

Answer 1

Try this:

    $('#textSearch').keyup(function (event) {
        var key = event.keyCode || event.which;

        if (key === 13) {
            doSearch();
        }
        return false;
    });

Answer 2

add prevent deault

$('#textSearch').keyup(function (event) {
    if (event.keyCode == '13') {
        event.preventDefault();
        doSearch();
    }
    return false;
});

Answer 3

Browsers may vary as to which event triggers a submit. In this case Safari may be submitting on the keydown event.
You could watch for the submit event without changing the markup and cancel it:

$('#the-id-of-the-form').submit( function( e ) {
    e.preventDefault();
});

You can then listen for the keyup event and handle it as you are doing now.

Answer 4

I use "keydown" because "keyup" didn't work for me. I also needed for this enter to be disabled with input fields that I am adding with AJAX, thus the "live".

You'll need to bind a "change" handler to the field. This version exits the field ("blur") then triggers a change on the field, then fires the change. Without the blur, the change is triggered twice!

 $('#textSearch').live('keydown', function(event) {
  if(event.keyCode == 13)
  {
  $(event.target).blur();
  $(event.target).change();
  event.preventDefault();
  return false;
  }
 }
);

Answer 5

I use "keydown" because "keyup" didn't work for me. I also needed for this enter to be disabled with input fields that I am adding with AJAX, thus the "live".

You'll need to bind a "change" handler to the field. This version exits the field ("blur") then triggers a change on the field, then fires the change. Without the blur, the change is triggered twice!

    $('#textSearch').live('keydown', function(event) {
  if(event.keyCode == 13)
  {
  $(event.target).blur();
  $(event.target).change();
  event.preventDefault();
  return false;
  }
 });