Javascript 如何检测用户何时在输入字段中按下 Enter

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/11365632/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 05:38:08  来源:igfitidea点击:

How to detect when the user presses Enter in an input field

javascript

提问by FlyingCat

I only have 1 input field and I want to register onChange and onKeyPress event to detect when the users finish their input or press the Enter key. I need to use javascript only. Thanks for the help.

我只有 1 个输入字段,我想注册 onChange 和 onKeyPress 事件来检测用户何时完成输入或按下 Enter 键。我只需要使用 javascript。谢谢您的帮助。

I have:

我有:

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

html

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

回答by sachleen

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

DEMO

演示

回答by Case

None of these answers as of yet specifically answer this question. The question is in 2 parts. 1. Enter is Pressed. 2. The uses is focused on an input.

到目前为止,这些答案都没有具体回答这个问题。问题分为两部分。1. 按下回车键。2. 用途集中在输入上。

Jquery

查询

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

Vanilla JavaScript

原生 JavaScript

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

This way ENTER is only detected when the user presses enter FROM that input.

这样 ENTER 仅在用户从该输入中按下 Enter 时才被检测到。

回答by Gibolt

More recent and much cleaner: use event.keyinstead of event.keyCode. No more arbitrary number codes!

更新更干净:使用event.key代替event.keyCode. 没有更多的任意数字代码!

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

Mozilla Docs

Mozilla 文档

Supported Browsers

支持的浏览器

回答by SpacedMonkey

To make it cross browser:

要使其跨浏览器:

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

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

See this question for more details: javascript event e.which?

有关更多详细信息,请参阅此问题:javascript event e.which?

回答by Dinesh Vadivelu

use the event.keyCode

使用 event.keyCode

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

There is already a discussion in this link jQuery Event Keypress: Which key was pressed?

此链接中已经有讨论 jQuery Event Keypress: which key was press?

回答by Chris Knight

Here is a good link that discusses this topic and provides a working examples

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

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/

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

回答by A-Sharabiani

I use this code and it works fine:

我使用此代码,它工作正常:

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

回答by Daniel De León

These day you can do it, in this way:

如今,您可以通过以下方式做到这一点:

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

Please notice that load()will run it once.

请注意,load()它将运行一次。