Question

我有一个输入，我只想添加一个事件监听器来激活一个函数，当我按下回车键，输入被聚焦时。我如何用纯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.keyCode === 13) {  //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();
    }
}

工作示例 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

如果您将按钮元素更改为

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

它可以使用键盘上的enter按钮。

Answer 5

你需要类似的东西 wage.addEventListener('keydown', validate);

然后，您的验证功能需要检查event.keyCode == 13以确定'enter'按键。

Answer 6

或者使用jQuery

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

Answer 7

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

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

Answer 8

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 - KeyboardEvent code Property

Answer 9

其实很简单。您可以使用 keyup 事件执行此操作。

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

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 函数，也不会执行它。

在输入键上执行函数

11 个答案: