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

Thanks for taking the time,

Armik

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

Thanks for taking the time,

Armik

• javascript
• jquery
• html
• dom
• dom-events

Share Improve this question Follow edited Aug 22, 2012 at 10:24 Danil Speransky 30.5k66 gold badges6969 silver badges7878 bronze badges asked Aug 22, 2012 at 5:25 NecronarNecronar 2311 silver badge44 bronze badges 4

• Your js looks broken - your missing an end bracket on the closure ie }); instead of };. Remove the trailing semi-colon from your if blocks ie if (...) { } rather than if (...) { };. Finally the jQuery doc's remend using e.which instead of e.keyCode api.jquery./event.which – Chris Moutray Commented Aug 22, 2012 at 5:47
• The code works fine as is, but I will definitely take your suggestions. Thank you! – Necronar Commented Aug 22, 2012 at 5:54
• It might work today but the syntax is wrong (sorry not broken) stackoverflow./questions/2717949/… – Chris Moutray Commented Aug 22, 2012 at 6:01
• @ChrisMoutray I had learned that it's good practice to add the semi-colon. Thanks for clearing that up for me. – Necronar Commented Aug 22, 2012 at 6:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Use keydown instead, for me that works (see demo: http://jsfiddle/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.

You can use the keyup event and event object's which property, jQuery normalizes the which property and it's cross-browser:

$(function() {
    $("#email").bind("keyup", function(e) {
         if (e.which == 13) {
            send();
            return false; 
         };   
         if (e.which == 9) {
            $("#submit_btn").toggleClass('submit1 submit1after');
         };
    });
};

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

        };

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

  });
 };