Javascript up arrow keypress not firing

Question

I've been doing some JS recently and getting this stupid error, I can detect the return key using e.keyCode and checking for keyCode == 13 but when I try to check for 38 (Up arrow) it never fires. Any help please?

HTML:

<input type="text" id="TxtMessage" 
       placeholder="Message" onKeyPress="SendMsg(event)" >

Javascript:

function SendMsg(e)
{
var message = document.getElementById("TxtMessage");

if(e.keyCode ==13)
{
    var json = {"message": message.value};
    json = JSON.stringify(json);
    ws.send(json);
    PreviousMessage = message.value;
    message.value = "";
    message.focus();
}
else if(e.keyCode == 38) 
{ 
    message.value = PreviousMessage;
}
}

EDIT: Fixed by changing onKeyPress to onKeyDown... Strange.

What are you trying to do here? What should happen when you press ENTER and UP? — ATOzTOA, Feb 03 '13 at 16:31
When up is pressed it sets the text of an element to the previous sent message. But the up arrow key press event isn't getting fired. I tried putting an alert there and it still didn't work — user1763295, Feb 03 '13 at 16:38

score 2 · Answer 1 · edited May 23 '17 at 12:14

Replace your following lines:

if(e.keyCode !=13) return;
if(e.keyCode == 38) { message.value = PreviousMessage; return;  }

for this one:

var charCode = typeof e.which == "number" ? e.which : e.keyCode;

if(charCode == 38) { message.value = PreviousMessage; return;  }
if(charCode !=13) return;

UPDATE:
My above code still didn't work when used in keypress event, as the correct solution is to use keydown or keyup events to catch the arrow keys. See here for an enhanced answer https://stackoverflow.com/a/2218915/352672 Also see here a working jsfiddle using the keyup event.

score 1 · Answer 2 · answered Feb 03 '13 at 16:09

1

Swap

if(e.keyCode !=13) return;

and the next line.

answered Feb 03 '13 at 16:09

abc667

514
4
19

You sure? Maybe problem is somewhere else? By "didn't work" you mean that `message.value` is not set correctly? – abc667 Feb 03 '13 at 16:26
Yes, I've been using alerts aswell to double check it's firing. The alerts are never shown. – user1763295 Feb 03 '13 at 16:39

ATOzTOA · Answer 3 · 2013-02-03T17:09:47.303

Use this:

function SendMsg(e)
{
    var message = document.getElementById("TxtMessage");

    // Load previous message
    if(e.keyCode == 38) { message.value = PreviousMessage; return;  }


    // Send message on ENTER
    if(e.keyCode == 13) {
        if(message.value !=null && message.value !="")
        {
            var json = {"message": message.value};
            json = JSON.stringify(json);
            ws.send(json);
            PreviousMessage = message.value;
            message.value = "";
            message.focus();
        }
        else
        {
            CAlert("Message cannot be empty.", false, true);    
        }
    }
}

Update Why keyDown works and keyPress doesn't?

Note that keydown and keyup provide a code indicating which key is pressed, while keypress indicates which character was entered. For example, a lowercase "a" will be reported as 65 by keydown and keyup, but as 97 by keypress. An uppercase "A" is reported as 65 by all events. Because of this distinction, when catching special keystrokes such as arrow keys, .keydown() or .keyup() is a better choice.

In short, keyPress event won't fire for arrow keys.

I need to check this, it makes sure that the message is only sent when enter is pressed and not other keys. I tried completely removing the check for 13 and just having the e.keyCode == 38 and I put an alert inside the { but it still didn't fire... — user1763295, Feb 03 '13 at 16:33
Just updated the Javascript in the original post to my new one which still doesn't work and fixes what you're trying to say is a problem. — user1763295, Feb 03 '13 at 16:35

Javascript up arrow keypress not firing

3 Answers3