在没有 jquery 的情况下检测 html 输入中的 Enter 按键答案

【问题标题】：Detect Enter keypress in html input without jquery在没有 jquery 的情况下检测 html 输入中的 Enter 按键
【发布时间】：2017-07-27 10:35:40
【问题描述】：

我只想检测我的 android 设备上的 enter 输入按键。我发现使用 jquery，我们可以这样做：

$('#inputText').keypress(function(event) {
var keycode = event.keyCode || event.which;
if(keycode == '13') {
    alert('You pressed a "enter" key in somewhere');    
}
});

但我不想使用 jquery。我想使用传统的方式，比如使用

document.getElementById('inputText')

但我不知道如何在按键事件功能中添加。你们有什么想法吗？

【问题讨论】：

标签： javascript android jquery html

【解决方案1】：

document.getElementById("id").onKeyDown = function(event) {

    if (event.keycode === 13) {
        alert("return pressed");
    }

};

【讨论】：

或keypressed或keyup

【解决方案2】：

使用event.key 而不是event.keyCode！

const node = document.getElementById('inputText');
node.addEventListener('keydown', function onEvent(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

Mozilla Docs

Supported Browsers

【讨论】：

【解决方案3】：

这样做：

<form onsubmit="Search();" action="javascript:void(0);">
<input type="text" id="searchCriteria" placeholder="Search Criteria"/>
<input type="button" onclick="Search();" value="Search" id="searchBtn"/>

【讨论】：

您能否为答案添加一些解释？尽管仅代码的答案可能会解决问题，但它通常不会教给 OP 任何东西，而且对未来的用户也不会那么有用。

【解决方案4】：

您可以使用addEventListener

document.getElementById('inputText').addEventListener("keypress", function() {});

【讨论】：

【解决方案5】：

你可以使用

document.getElementById('txtBox').onkeypress = function(e) {
  if (!e) e = window.event;
  var keyCode = e.keyCode || e.which;
  if (keyCode == '13') {
    alert("Enter Pressed");

  }
}

&lt;input id="txtBox" type="text" /&gt;

【讨论】：

【解决方案6】：

与jQuery 中的几乎相同。使用eventListener 并将参数e 传递给函数以捕获事件，它是keyCode。

var elem = document.getElementById('inputText');
elem.addEventListener('keypress', function(e){
  if (e.keyCode == 13) {
    console.log('You pressed a "enter" key in somewhere');   
  }
});

&lt;input id='inputText'&gt;

【讨论】：

@Coolguy 我没有自己测试过，但我想是的。
@Arun D 感谢您的编辑，但我更愿意避免使用 DOM 事件，onkeypress 或 onclick。 (: