How can I execute a function on pressing the enter key in an <input> field?

Question

I have an input and I'd simply like to add an event listener for it to activate a function when I press enter, when the input is focused. How do I do this with pure JS?

Right now I have:

HTML:

Enter your wage:<input type="text" id="wage" value ="" size=20>
<button id="sub">Submit</button>

JavaScript:

var wage = document.getElementById("wage");
wage.addEventListener("change", validate);

var btn = document.getElementById("sub");
btn.addEventListener("click", validate);

So basically the function validate() activates when I click OR change the text, but I want to call it by pressing enter.

Solution 1

You can use this:

var wage = document.getElementById("wage");
wage.addEventListener("keydown", function (e) {
    if (e.code === "Enter") {  //checks whether the pressed key is "Enter"
        validate(e);
    }
});

function validate(e) {
    var text = e.target.value;
    //validation of the input...
}

Live demo here

Solution 2

var elem = document.getElementById("wage");
elem.onkeyup = function(e){
    if(e.keyCode == 13){
       validate();
    }
}

Working Example http://jsfiddle.net/aMgLK/

Solution 3

Here is a version of the currently accepted answer (from @MinkoGechev) with key instead of keyCode:

const wage = document.getElementById('wage');
wage.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        validate(e);
    }
});

function validate(e) {
    const text = e.target.value;
    //validation of the input...
}

Comments

[nnnnnn]

+1. Though you could replace the alert() with validate().

[Minko Gechev]

All browsers which supports addEventListener (IE9+, check out here developer.mozilla.org/en-US/docs/DOM/…)

[Brett DeWoody]

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

[Alexander Kim]

Use named functions instead of anonymous, because it would be impossible to remove this listener.

[Juanma Menendez]

One important detail e.keyCode is currently deprecated, the new correct way is e.key References //e.keyCode developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCo‌​de //e.key developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key

[Muhammad wasi]

In this code when the user enter the input text and click on enter so it will automatically generated the result.

[Roberto Caboni]

So, incorporate the explanation in the answer by editing it. Explained code is more likely to be useful to other people. ;)

[Muhammad wasi]

This is the first time i have uploaded the code so i am sorry!

[Tomer Shetah]

Hello and welcome to SO! While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. Please read the tour, and How do I write a good answer?

[iatharva]

Why is the e used? and Can we execute the code without it?

[Koray Tugay]

@iatharva How will you know what key was pressed if you do not make use of the event parameter?

[SendETHToThisAddress]

I'm downvoting this for 2 reasons: 1) there is no explanation. 2) this event will trigger on every keypress on every object and the login will execute anytime Enter is pressed anywhere, but the event should only be triggered on 1 or more specific elements.

[SendETHToThisAddress]

Should be .key not .code. If .code is used and Enter is pressed on a 10key it will come through as 'NumpadEnter', not 'Enter', but when you use .key it always comes through as 'Enter'.

[Vivaan]

This question doesn't mention jQuery. Please before answering, check if it mentions the Library/Programming Language in the tags or the body