Switch jQuery onClick to keyCode

Question

What am I missing in order to translate my jQuery onClick events into keypress events where a user can use a keypad?

The specific example is for a calculator. Using jQuery and the on click/touch events work perfect. However, when I try to introduce keyCodes I am not getting the results I think I should.

Here is my example code;

$(document).keypress(function(event){
    var display = "0";
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode === 13){
        alert(keycode + " = ENTER");    
        calcDisplay(total(), true);
    }
});

Most of this I picked up from other successful solutions to similar issues. So the way I understand it is; if someone presses "enter" on the keyboard, I'd get my alert and then process my answer.

The jQuery version of this that works for me looks like this;

$(".button").on("click touch", function(){
    var button = $(this).data("value");
    if(button === "="){
      calcDisplay(total(), true);
    }

superNewb to JS here so much love ahead of time if this is something super foolish on my end.

Your code should work. Here's a plunker with it working plnkr.co/edit/mvDnrOEiUPgmUKWBj5OD?p=preview . What does console.log(keycode); give you right before if(keycode === 13) — nick.graziano
– nick.graziano, Commented Apr 17, 2016 at 0:58

zzzzBov · Accepted Answer · 2016-04-17 01:08:46Z

1

keypress is meant to be used when characters are being inserted as input. keydown is meant to be used to detect any key.

quirksmode has a nice little write-up about the differences.

Instead of $(document).keypress use $(document).keydown.

Additionally, jQuery normalizes event.which, so instead of:

var keycode = (event.keyCode ? event.keyCode : event.which);

you can use

var key = e.which;

answered Apr 17, 2016 at 1:08

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny M. Over a year ago

Magical! All of the operators are working as needed. Also, it appears that I was trying to execute this separately looking for the calcDisplay() function before it was defined. Haven't yet solved the numeric keycodes just yet but we're on the right path. Thank you all for the help.

Collectives™ on Stack Overflow

Switch jQuery onClick to keyCode

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related