How can I execute a function on pressing the enter key in an 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.

Answer 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

Answer 2

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

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

Answer 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...
}

Answer 4

var input = document.getElementById("todo-item");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("sub").click(); 
    }
});

Answer 5

HTML:
Enter your wage:

<input type="text" id="wage" value ="" onkeypress="myFunction(event)" size=20>

JavaScript:

function myFunction(event) {
    var x = event.code;
    if(x == "Enter") {
        validate();
    }    
}

w3schools - KeyboardEvent code Property

Answer 6

You would need something like wage.addEventListener('keydown', validate);

Your validate function would then need to check event.keyCode == 13 to determine 'enter' keypress.

Answer 7

If you change your button element to a

<input type="submit" value="Submit">

it will work with the enter button on your keyboard.

Answer 8

Or with jQuery

$("#wage").on("keydown", function (e) {
    if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
        validate(e);
    }
});

Answer 9

It's quite simple. You can do this using keyup event.

$(document).on("keyup", "#wage", function(e) {
  if (e.which == 13) {
    alert("Hi")
  }
})

Answer 10

I would suggest using the key attribute of the KeyboardEvent, documentation on that can be found here. You can also make the code much shorter by using a lambda function and an AND (&&) operator.

Here's how I would do it:

document.querySelector('#wage').addEventListener('keypress', e => e.key === 'Enter' && validate(e));

The AND operator first checks whether e.key is equal to 'Enter', and if that is true it executes the validate function. If e.key is not 'Enter' it will not reach the validate function and will not execute it.

Answer 11

I know there are very nice and different solutions. But I want to add one more thing. Because I didn't see it among the answers.In this situation "onkeydown" can be used.I see a lot of solution with keyup method.

• It is a DOM Level 2 (2001) feature.

• It is fully supported in all browsers.

• The onkeydown() method runs when a keyboard key is pressed. The onkeyup() method works when a finger is lifted from a keyboard key.

     document.querySelector("#wage").onkeydown = (e) => {
         if(e.keyCode === 13){  //enter
     document.querySelector(".add").click();
      }
        if(e.keyCode === 46){ // delete
     document.querySelector(".delete").click();
     }};
  

Answer 12

$(document).on("keyup", function(e) {
    var key = e.which;

    if (key == 13) // the enter key ascii code
    {
        login();
    }
});