How to detect when the user presses Enter in an input field

Question

I only have 1 input field and I want to register onChange and onKeyPress event to detect when the users finish their input or press the Enter key. I need to use javascript only. Thanks for the help.

I have:

var load = function (){
   //I want to trigger this function when user hit Enter key.
}

document.getElementById('co').onchange=load;   //works great
document.getElementById('co').onKeyPress=load; 
//not sure how to detect when user press Enter

html

//no form just a single input field
<input type='text' id='co'>

Possible duplicate of [Enter key press event in JavaScript](http://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript) — Bae, Mar 23 '16 at 21:16

score 88 · Accepted Answer · edited Dec 06 '20 at 12:12

88

document.getElementById('foo').onkeypress = function(e){
    if (!e) e = window.event;
    var keyCode = e.code || e.key;
    if (keyCode == 'Enter'){
      // Enter pressed
      return false;
    }
  }

DEMO

edited Dec 06 '20 at 12:12

Daniel

398
2
16

answered Jul 06 '12 at 15:55

sachleen

30,730
8
78
73

additional question. How do I access foo element after I detect the user press Enter? I can't use this keyword, it refer to window object. Thanks a lot – FlyingCat Jul 06 '12 at 16:34
12

i'd use `if (keyCode === 13)` for strict equals – bobbyrne01 Jan 17 '15 at 23:15
1

Sorry, kindly, what is the aim and the meaning of the first if? `if (!e)` - thank you – Robert Mar 07 '19 at 20:31
1

@Robert It means is if `e` is undefined, we will give value to `e` from `window.event` – ridoansaleh Jul 23 '19 at 03:30
2

Both "keyCode" and "which" are deprecated. Use "code" or "key" these days, and compare it to the string value "Enter". – Vorpal Oct 15 '19 at 14:18
1

May change to: if (keyCode == 'Enter' || keyCode == 'NumpadEnter') – Johnny Mar 03 '21 at 01:39

Case · Answer 2 · 2019-03-19T19:59:10.263

None of these answers as of yet specifically answer this question. The question is in 2 parts. 1. Enter is Pressed. 2. The uses is focused on an input.

Jquery

$('#input-id').on("keyup", function(e) {
    if (e.keyCode == 13) {
        console.log('Enter');
    }
});

Vanilla JavaScript

inputId = document.getElementById('input-id');
inputId.addEventListener('keyup', function onEvent(e) {
    if (e.keyCode === 13) {
        console.log('Enter')
    }
});

This way ENTER is only detected when the user presses enter FROM that input.

score 14 · Answer 3 · answered Sep 05 '17 at 21:26

More recent and much cleaner: use event.key instead of event.keyCode. No more arbitrary number codes!

const node = document.getElementById('co');
node.addEventListener('keydown', function onEvent(event) {
    if (event.key === "Enter") {
        return false;
    }
});

Mozilla Docs

Supported Browsers

score 7 · Answer 4 · edited May 23 '17 at 12:17

7

To make it cross browser:

document.getElementById('foo').onkeypress = function(e) {
    var event = e || window.event;
    var charCode = event.which || event.keyCode;

    if ( charCode == '13' ) {
      // Enter pressed
      return false;
    }
}

See this question for more details: javascript event e.which?

edited May 23 '17 at 12:17

Community

1
1

answered Jul 06 '12 at 16:08

SpacedMonkey

2,725
1
16
17

score 1 · Answer 5 · edited May 23 '17 at 12:02

1

use the event.keyCode

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   //Do something
 }

There is already a discussion in this link jQuery Event Keypress: Which key was pressed?

edited May 23 '17 at 12:02

Community

1
1

answered Jul 06 '12 at 15:59

Dinesh Vadivelu

29
3

score 0 · Answer 6 · edited Jul 06 '12 at 15:58

Here is a good link that discusses this topic and provides a working examples

function DetectEnterPressed(e) {
var characterCode
if(e && e.which){ // NN4 specific code
e = e
characterCode = e.which
}
else {
e = event
characterCode = e.keyCode // IE specific code
}
if (characterCode == 13) return true // Enter key is 13
else return false
}

http://hspinfo.wordpress.com/2008/09/01/using-javascript-detect-enter-key-pressed-event-in-a-textbox-and-perform-the-action/

score 0 · Answer 7 · answered Jan 28 '16 at 18:39

0

I use this code and it works fine:

document.getElementById("theIdHere").onkeypressed = 
function() {
     if(this.event.which === 13)
        console('passed');
}

answered Jan 28 '16 at 18:39

A-Sharabiani

17,750
17
113
128

score 0 · Answer 8 · answered Feb 22 '20 at 23:48

0

These day you can do it, in this way:

document.getElementById('co').addEventListener('keydown',
  e => !e.repeat && e.keyCode === 13 && load());

Please notice that load() will run it once.

answered Feb 22 '20 at 23:48

Daniel De León

13,196
5
87
72

How to detect when the user presses Enter in an input field

8 Answers8

Linked

Related