How to avoid refreshing page with event onkeypress ENTER (keyCode == 13)?

Question

I need to send form input to js function after keypress enter

Following answer https://stackoverflow.com/a/905233/6827096 but below code refreshing page after pressing enter.

#.html
<script src="chat.js'"></script>
<input  onkeypress="return sendChatMessage(event)">

#chat.js
function sendChatMessage(e) {
    if (e.keyCode == 13) {
        console.log("e.keyCode == 13");   //never reachable
        return false;
    }
    return true;
}

How to avoid refreshing page with event onkeypress ENTER (keyCode == 13) ?

Function sendChatMessage is visible in browser console with page loaded.

Is input inside a form? I don't see how pressing enter would refresh the page. If it is, consider stopping form submission first. — Yanaro, May 12 '17 at 16:49

errata · Accepted Answer · 2017-05-12T17:02:16.183

4

If your input is within <form> element, pressing Enter will try to submit the form. Try to add preventDefault() in your sendChatMessage():

function sendChatMessage(e) {
    if (e.keyCode == 13) {
        e.preventDefault();  // this should prevent default action
        console.log("e.keyCode == 13");   //never reachable
        return false;
    }
    return true;
}

edited May 12 '17 at 17:02

answered May 12 '17 at 16:55

errata

5,695
10
54
99

haMzox · Answer 2 · 2017-05-12T17:05:48.420

1

Try adding e.preventDefault(); to your function sendChatMessage, it is going to prevent link from opening. Your code will look like this:

function sendChatMessage(e) {

    if (e.keyCode == 13) {
e.preventDefault();  // add  this line of code.
        console.log("e.keyCode == 13");   //never reachable
        return false;
    }
    return true;
}

edited May 12 '17 at 17:05

answered May 12 '17 at 16:58

haMzox

2,073
1
12
25

preventDefault() is the answer, (user @errata was 4 min faster). Thanks for reply. – user6827096 May 12 '17 at 17:05
That's completely okay. – haMzox May 12 '17 at 17:06

Taras Kovalenko · Answer 3 · 2017-05-12T17:11:18.270

1

Try to use both e.which and e.keyCode:

function sendChatMessage(e) {
    if (e.which == 13 || e.keyCode == 13) {
        e.preventDefault();
        console.log("e.keyCode == 13"); 
        return false;
    }
    return true;
}

edited May 12 '17 at 17:11

answered May 12 '17 at 17:05

Taras Kovalenko

2,323
3
24
49

How to avoid refreshing page with event onkeypress ENTER (keyCode == 13)?

3 Answers3