如何在 <input> 字段中按 Enter 键来执行功能？

Question

我有一个输入，我只想添加一个事件侦听器，以便在输入聚焦时按 Enter 键时激活一个功能。我如何用纯 JS 做到这一点？

现在我有：

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

所以基本上，当我单击或更改文本时，功能

validate()

就会激活，但我想通过按 Enter 来调用它。

Answer 1

您可以使用这个：

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

现场演示

Answer 2

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

工作示例http://jsfiddle.net/aMgLK/

Answer 3

这是当前接受的答案的一个版本（来自@MinkoGechev），其中使用 key 而不是 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：
输入您的工资：

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

JavaScript：

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

w3schools - 键盘事件代码属性

Answer 6

这很简单。您可以使用 keyup 事件来完成此操作。

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

Answer 7

你需要类似的东西

wage.addEventListener('keydown', validate);

您的验证函数需要检查

event.keyCode == 13

以确定“输入”按键。

Answer 8

如果将按钮元素更改为

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

它将与键盘上的 Enter 按钮配合使用。

Answer 9

或者使用 jQuery

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

Answer 10

我建议使用 KeyboardEvent 的

key

属性，相关文档可以在 here 找到。您还可以使用 lambda 函数和 AND (&&) 运算符来缩短代码。

我会这样做：

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

AND 运算符首先检查

e.key

是否等于“Enter”，如果为真，则执行

validate

函数。如果

e.key

不是“Enter”，它将不会到达

validate

函数并且不会执行它。

Answer 11

我知道有非常好的且不同的解决方案。但我还想补充一件事。因为我在答案中没有看到它。在这种情况下可以使用“onkeydown”。我看到很多使用 keyup 方法的解决方案。

• 这是 DOM Level 2 (2001) 功能。

• 所有浏览器都完全支持。

• onkeydown() 方法在按下键盘按键时运行。当手指从键盘按键上抬起时，onkeyup() 方法就会起作用。

     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

我刚刚做了这个。

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

Answer 13

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

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