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

Posted 2023-02-22

【中文标题】如何检测用户何时在输入字段中按 Enter

【英文标题】：How to detect when the user presses Enter in an input field

【发布时间】：2012-07-07 02:45:31

【问题描述】：

我只有 1 个输入字段，我想注册 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'>

【问题讨论】：

Enter key press event in JavaScript的可能重复

【参考方案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

【讨论】：

附加问题。检测到用户按 Enter 后如何访问 foo 元素？我不能使用这个关键字，它指的是窗口对象。非常感谢

我会使用 if (keyCode === 13) 进行严格的等于

对不起，请问第一个if的目的和含义是什么？ if (!e) - 谢谢

“keyCode”和“which”都已弃用。这些天使用“code”或“key”，并将其与字符串值“Enter”进行比较。

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

【参考方案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')
    
);

这种方式 ENTER 仅在用户按输入 FROM 时才检测到。

【参考方案3】：

更新更简洁：使用event.key 而不是event.keyCode。 没有更多的任意数字代码！

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

Mozilla Docs

Supported Browsers

【参考方案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 event e.which?

【参考方案5】：

使用 event.keyCode

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

此链接中已有讨论 jQuery Event Keypress: Which key was pressed?

【参考方案6】：

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

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/

【参考方案7】：

我使用这个代码，它工作正常：

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

【参考方案8】：

这些天你可以这样做，通过这种方式：

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

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