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

admin管理员组

文章数量:1136511

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.

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.

• javascript
• events
• input
• listener

Share Improve this question Follow edited Jan 11, 2021 at 10:19 Ivar 6,7881212 gold badges5656 silver badges6767 bronze badges asked Apr 15, 2013 at 9:00 frrlodfrrlod 6,67788 gold badges3232 silver badges3838 bronze badges

Add a comment  | 

13 Answers 13

Sorted by: Reset to default 71

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

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

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

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

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

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

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

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

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

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

If you change your button element to a

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

it will work with the enter button on your keyboard.

Or with jQuery

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

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.

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();
     }};
  

I just did this.

addEventListener("keydown", function (event) {
    if (event.keyCode === 13) {
        do_something();
    }
});

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

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

本文标签： javascriptHow can I execute a function on pressing the enter key in an ltinputgt fieldStack Overflow