如何检测用户在输入框中按下回车键

Question

我只有一个输入字段，我想注册onChange和onKeyPress事件来检测用户何时完成输入或按下Enter键。我需要仅使用JavaScript实现。谢谢帮助。

我有：

var load = function (){
   //I want to trigger this function when user hit Enter key.
}

document.getElementById('co').onchange=load;   //works great
document.getElementById('co').onKeyPress=load; 
//not sure how to detect when user press Enter

HTML

//no form just a single input field
<input type='text' id='co'>

- FlyingCat

---

可能是JavaScript中按Enter键事件的重复问题。 - Bae

重复的问题 https://stackoverflow.com/q/7060750/14264568 的副本。 - undefined

Answer 1

document.getElementById('foo').onkeypress = function(e){
    if (!e) e = window.event;
    var keyCode = e.code || e.key;
    if (keyCode == 'Enter'){
      // Enter pressed
      return false;
    }
  }

DEMO

- sachleen

---

附加问题。在检测到用户按下回车键后，如何访问foo元素？我不能使用this关键字，它指的是窗口对象。非常感谢。 - FlyingCat

我会使用 if (keyCode === 13) 进行严格相等比较。 - bobbyrne01

抱歉，请问第一个if的目的和意义是什么？if (!e) - 谢谢 - Robert

@Robert 这意味着如果 e 未定义，我们将从 window.event 给 e 赋值。 - ridoansaleh

现在"keyCode"和"which"都已经被弃用了。使用"code"或者"key"，并将其与字符串值"Enter"进行比较。 - Vorpal

可能更改为： if (keyCode == 'Enter' || keyCode == 'NumpadEnter') - Johnny

Answer 2

到目前为止，这些答案都没有具体回答这个问题。这个问题有两个部分。1.按下Enter键。2.使用者专注于输入框。

Jquery

$('#input-id').on("keyup", function(e) {
    if (e.keyCode == 13) {
        console.log('Enter');
    }
});

纯 JavaScript

inputId = document.getElementById('input-id');
inputId.addEventListener('keyup', function onEvent(e) {
    if (e.keyCode === 13) {
        console.log('Enter')
    }
});

只有在用户从该输入框中按下回车键时，才会检测到回车键。

- Case

Answer 3

更近期而且更加清晰明了：使用 event.key 代替 event.keyCode。不再需要任意数字编码！

const node = document.getElementById('co');
node.addEventListener('keydown', function onEvent(event) {
    if (event.key === "Enter") {
        return false;
    }
});

Mozilla 文档

支持的浏览器

- Gibolt

Answer 4

为了实现跨浏览器兼容性：

document.getElementById('foo').onkeypress = function(e) {
    var event = e || window.event;
    var charCode = event.which || event.keyCode;

    if ( charCode == '13' ) {
      // Enter pressed
      return false;
    }
}

更多细节请参见此问题：javascript事件e.which?

- SpacedMonkey

Answer 5

使用 event.keyCode

var code = (e.keyCode ? e.keyCode : e.which);
 if(code == 13) { //Enter keycode
   //Do something
 }

这个链接已经有讨论了 jQuery事件Keypress：按下了哪个键？

- Dinesh Vadivelu

Answer 6

我使用这段代码，它运行良好：

document.getElementById("theIdHere").onkeypressed = 
function() {
     if(this.event.which === 13)
        console('passed');
}

- A-Sharabiani

Answer 7

这里有一个很好的链接，讨论了这个主题并提供了工作示例

function DetectEnterPressed(e) {
var characterCode
if(e && e.which){ // NN4 specific code
e = e
characterCode = e.which
}
else {
e = event
characterCode = e.keyCode // IE specific code
}
if (characterCode == 13) return true // Enter key is 13
else return false
}

http://hspinfo.wordpress.com/2008/09/01/using-javascript-detect-enter-key-pressed-event-in-a-textbox-and-perform-the-action/

- Chris Knight

Answer 8

现在你可以这样做：

document.getElementById('co').addEventListener('keydown',
  e => !e.repeat && e.keyCode === 13 && load());

请注意，load() 只会运行一次。

- Daniel De León