【问题标题】:Detect the Enter key in a text input field检测文本输入字段中的 Enter 键
【发布时间】:2011-10-27 00:10:33
【问题描述】:

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

我做错了什么?

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

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

【问题讨论】:

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

标签: javascript jquery


【解决方案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.keyCodeNumber,所以JavaScript 将采取与===== 相同的步骤。
  • e.which 被声明为更有用的跨浏览器
  • 属性whichcodecharCodekeyCode 已弃用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】:

        我发现最好的方法是使用keydownkeyup 不适合我)。

        注意:我也禁用了表单提交,因为通常当您喜欢在按 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);
                  }
              }
              

              【讨论】:

                猜你喜欢
                • 1970-01-01
                • 1970-01-01
                • 2018-05-08
                • 2012-07-07
                • 2021-07-10
                • 2010-11-23
                • 1970-01-01
                • 1970-01-01
                相关资源
                最近更新 更多