Question

I have a problem I can’t seem to sort out.

I have a form with a custom styled button (input type=button). When typing in the text field, I want people to be able to press the TAB key and go to the button. However, it won’t use a tab-index so my solution was to highlight the label and change the CSS to give the button a new border color. However, the border color will not change on keypress in any browser other than Firefox.

Here is what I have:

$(function() {
    $("#email").bind("keypress", function(e) {
            if (e.keyCode == 13) {
                send();
                return false; 

            };

            if (e.keyCode == 9) {
                    $("#submit_btn").removeClass('submit1').addClass('submit1after');
            };

      });
};

The first enter keypress is to serialize and email the form and all.

I can’t seem to get it to work for the life of me. What am I doing wrong? Is there a better solution to what I’m trying to accomplish?

Thanks for taking the time,

Armik

Answer 1

Use keydown instead, for me that works (see demo: http://jsfiddle.net/npGtX/2/)

$(function () {
  $("#email").bind("keydown", function (e) {
    if (e.keyCode == 13) {
      send();
      return false;    
    };

    if (e.keyCode == 9) {
      $("#submit_btn").removeClass('submit1').addClass('submit1after');
    };
  });
};

Also I found this: Suppressing keyPress for non-character keys?

keypress is not necessarily triggered when the keypress is not a
character. So the browser may not trigger an event on backspace, F1,
the down key, etc.