Keypress to change class in jQuery

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

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 recommend using `e.which` instead of `e.keyCode` http://api.jquery.com/event.which/ — Chris Moutray, Aug 22 '12 at 05:47
The code works fine as is, but I will definitely take your suggestions. Thank you! — Necronar, Aug 22 '12 at 05:54
It might work today but the syntax is wrong (sorry not broken) http://stackoverflow.com/questions/2717949/javascript-when-should-i-use-a-semicolon-after-curly-braces — Chris Moutray, Aug 22 '12 at 06:01
@ChrisMoutray I had learned that it's good practice to add the semi-colon. Thanks for clearing that up for me. — Necronar, Aug 22 '12 at 06:33

score 3 · Accepted Answer · edited May 23 '17 at 12:20

3

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.

edited May 23 '17 at 12:20

Community

1
1

answered Aug 22 '12 at 05:31

Danil Speransky

29,891
5
68
79

Speransky Danil, this did it for me. Thank you! Should keydown be the default for any keyboard trigger I need? – Necronar Aug 22 '12 at 05:52

score 1 · Answer 2 · answered Aug 22 '12 at 05:46

1

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');
         };
    });
};

answered Aug 22 '12 at 05:46

Ram

143,282
16
168
197

I'll be changing the keyCode to which. However, keydown solved the problem for me, but I'm sure keyup would do the trick as well. Thank you for your help! – Necronar Aug 22 '12 at 05:55

score 0 · Answer 3 · answered Aug 22 '12 at 05:36

 $(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');
        };

  });
 };

Keypress to change class in jQuery

3 Answers3