检测文本输入字段中的 Enter 键

Posted 2023-02-16

【中文标题】检测文本输入字段中的 Enter 键

【英文标题】：Detect the Enter key in a text input field

【发布时间】：2011-10-27 00:10:33

【问题描述】：

如果在特定输入时按下回车，我正在尝试执行一个功能。

我做错了什么？

$(document).keyup(function (e) 
    if ($(".input1").is(":focus") && (e.keyCode == 13)) 
        // Do something
    
);

有没有更好的方法可以说，如果在.input1 上按下回车，则执行功能？

【问题讨论】：

Enter key press event in javascript的可能重复

所有解决方案都是有效的，但请记住，您应该使用 e.key 或 e.code，因为 e.which 和 e.keyCode 都已弃用。您可以在此处找到要检测的键的正确值：keyjs.dev

【参考方案1】：

$(".input1").on('keyup', function (e) 
    if (e.key === 'Enter' || e.keyCode === 13) 
        // Do something
    
);

// e.key is the modern way of detecting keys
// e.keyCode is deprecated (left here for for legacy browsers support)
// keyup is not compatible with Jquery select(), Keydown is.

【讨论】：

您在哪个浏览器中测试它？我认为旧版本的 IE 不会触发文档上的 keyup 事件（虽然不确定）。

您的代码无法正常工作，因为您使用了 .is() 并且需要 === 而不是 ==。有关更多详细信息，请参阅我的答案。

@jQuerybeast 这不是需要的，而且event.keyCode 是Number，所以JavaScript 将采取与== 或=== 相同的步骤。

e.which 被声明为更有用的跨浏览器

属性which、code、charCode 和keyCode 已弃用developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent，请在您的答案中添加实际信息。

【参考方案2】：

试试这个来检测在文本框中按下的Enter 键。

$(function()

$(".input1").keyup(function (e) 
    if (e.which == 13) 
        // Enter key pressed
    
 );

);

【参考方案3】：

$(document).keyup(function (e) 
    if ($(".input1:focus") && (e.keyCode === 13)) 
       alert('ya!')
    
 );

或者只是绑定到输入本身

$('.input1').keyup(function (e) 
    if (e.keyCode === 13) 
       alert('ya!')
    
  );

要确定您需要哪个 keyCode，请使用网站http://keycode.info

【讨论】：

谢谢。我学到了一些新东西。顺便说一句，我经常使用 .is() ，所以这不合逻辑，不能正常工作。还有 ==，我又在其他情况下使用了两个 ==

np，你应该一直使用 ===

【参考方案4】：

回答这个问题可能为时已晚。但是下面的代码只是阻止了回车键。只需复制和粘贴即可。

        <script type="text/javascript"> 
        function stopRKey(evt)  
          var evt = (evt) ? evt : ((event) ? event : null); 
          var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null); 
          if ((evt.keyCode == 13) && (node.type=="text"))  return false; 
         

        document.onkeypress = stopRKey; 

        </script>

【参考方案5】：

 $(document).ready(function () 
        $(".input1").keyup(function (e) 
            if (e.keyCode == 13) 
                // Do something
            
        );
    );

【参考方案6】：

我发现最好的方法是使用keydown（keyup 不适合我）。

注意：我也禁用了表单提交，因为通常当您喜欢在按 Enter 键时执行某些操作时，唯一认为您不喜欢的就是提交表单:)

$('input').keydown( function( event ) 
    if ( event.which === 13 ) 
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    
);

【讨论】：

event.keyCode 已弃用 event.which 不是，所以这样更好

【参考方案7】：

event.key === "回车"

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

注意：旧属性（.keyCode 和 .which）已弃用。

const node = document.getElementsByClassName("input1")[0];
node.addEventListener("keyup", function(event) 
    if (event.key === "Enter") 
        // Do work
    
);

现代风格，带有 lambda 和解构

node.addEventListener("keyup", (key) => 
    if (key === "Enter") 
        // Do work
    
)

如果你必须使用 jQuery：

$(document).keyup(function(event) 
    if ($(".input1").is(":focus") && event.key == "Enter") 
        // Do work
    
);

Mozilla Docs

Supported Browsers

【讨论】：

纯javascript版本的荣誉，不知道为什么所有其他人都在jquery中

因为，OP 将他的示例代码放在 jQuery 中，并且（以及 JavaScript）jQuery 被标记。

【参考方案8】：

试试这个来检测文本框中按下的 Enter 键。

$(document).on("keypress", "input", function(e)
    if(e.which == 13)
        alert("Enter key pressed");
    
);

DEMO

【参考方案9】：

对我有用的解决方案如下

$("#element").addEventListener("keyup", function(event) 
    if (event.key === "Enter") 
        // do something
    
);

【参考方案10】：

这段代码为我处理了整个站点中的每个输入。它会检查 INPUT 字段中的 ENTER KEY，并且不会在 TEXTAREA 或其他地方停止。

$(document).on("keydown", "input", function(e)
 if(e.which == 13)
  event.preventDefault();
  return false;
 
);

【参考方案11】：

这是我为我的 Angular 项目所做的：

html：

<input
    class="form-control"
    [(ngModel)]="searchFirstName"
    (keyup)="keyUpEnter($event)"
/>

打字稿：

keyUpEnter(event: KeyboardEvent) 
    if (event.key == 'Enter') 
        console.log(event);