39

我有一个输入，我只想为它添加一个事件侦听器，以便在我按下回车键时激活一个功能，当输入聚焦时。我如何用纯 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 来调用它。

4

11 回答 11

60

你可以使用这个：

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

现场演示在这里

于 2013-04-15T09:04:16.003 回答
5 
var elem = document.getElementById("wage");
elem.onkeyup = function(e){
    if(e.keyCode == 13){
       validate();
    }
}

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

于 2013-04-15T09:05:28.983 回答
5

这是当前接受的答案（来自@MinkoGechev）的一个版本，其中带有密钥而不是密钥代码：

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...
}
于 2018-06-22T17:58:11.297 回答
0

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

然后，您的验证功能将需要检查event.keyCode == 13以确定“输入”按键。

于 2013-04-15T09:04:49.827 回答
0

如果您将按钮元素更改为

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

它将与键盘上的输入按钮一起使用。

于 2013-04-15T09:05:24.537 回答
0

或者使用 jQuery

$("#wage").on("keydown", function (e) {
    if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
        validate(e);
    }
});
于 2016-01-08T09:13:16.580 回答
0 
var input = document.getElementById("todo-item");
input.addEventListener("keyup", function(event) {
    if (event.keyCode === 13) {
        event.preventDefault();
        document.getElementById("sub").click(); 
    }
});
于 2020-07-22T09:49:16.193 回答
0

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 - 键盘事件代码属性

于 2020-12-19T11:33:39.313 回答
0

这很简单。您可以使用 keyup 事件来做到这一点。

$(document).on("keyup", "#wage", function(e) {
  if (e.which == 13) {
    alert("Hi")
  }
})
于 2021-06-11T09:48:09.293 回答
0

我建议使用keyKeyboardEvent 的属性，可以在此处找到有关该属性的文档。您还可以使用 lambda 函数和 AND (&&) 运算符使代码更短。

这是我的做法：

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

AND 运算符首先检查是否e.key等于“Enter”，如果为真，则执行该validate函数。如果e.key不是'Enter'，它将不会到达该validate功能并且不会执行它。

于 2021-07-14T08:47:47.657 回答
-1 
$(document).on("keyup", function(e) {
    var key = e.which;

    if (key == 13) // the enter key ascii code
    {
        login();
    }
});
于 2017-08-19T09:29:18.707 回答