如何使用jQuery检测键盘上的Enter键？

731

我想检测用户是否按下了EnterjQuery。

这怎么可能？需要插件吗？

编辑：看来我需要使用该keypress()方法。

我想知道是否有人知道该命令是否存在浏览器问题-就像我应该知道的浏览器兼容性问题一样？

javascript  jquery  keyboard-events  enter  jquery-events 
— 克里斯
source
— Haim Evgi，2009年
5
Javascript框架中最好的事情之一是默认情况下它们应该与跨浏览器兼容。它们处理浏览器兼容性检查，因此用户不必这样做。我尚未阅读JQuery源代码，但我怀疑按键功能在这种意义上是否有所不同。
— miek
2
浏览器唯一的兼容性问题是，您应该使用e.which而不是e.keyCode来检测ASCII代码。
— 丹尼尔（Daniel）
1
— 雷莫

Answers:

1330

jQuery的全部要点是，您不必担心浏览器的差异。我很确定您可以放心enter在所有浏览器中都为13。因此，请记住这一点：

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
— 保罗·贝尔甘蒂诺
source
7
我之所以链接到该网站，是因为我阅读了此书，然后over了一下为什么按键无法在IE上工作的问题。（它不会$(window)在IE下绑定）quirksmode.org/dom/events/keys.html
— 隐身时间
17
e.keyCode不是100％跨浏览器。使用e.which如下所示
— Daniel
15
来自jQuery文档“ event.which属性规范化event.keyCode和event.charCode。建议观看event.which作为键盘键输入。”
— Riccardo Galli 2012年
20
$（document）.on（'keypress'，function（e）{
— user956584
5
由于事件传播，我得到了给定功能的多次执行（即，警报被抛出两次）。要停止此操作，请在函数末尾添加e.stopPropagation（）
— dpb 2013年
129

我写了一个小插件，使绑定“按Enter键”事件更容易：

$.fn.enterKey = function (fnc) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if (keycode == '13') {
                fnc.call(this, ev);
            }
        })
    })
}

用法：

$("#input").enterKey(function () {
    alert('Enter!');
})
— 安德里亚
source
对我来说，这并不工作（我得到#input的<input>场）
— Rápli安德拉什
1
如果#input元素是动态的怎么办？
— Jigar7521 '16
@mplungjan不确定“委派”是什么意思
— Andrea
$("#input").on("someevent","someselector",function () {})
— mplungjan
62

我无法得到通过@Paolo Bergantino发布工作的代码，但是当我把它改成$(document)和e.which，而不是e.keyCode后来我发现它完美地工作。

$(document).keypress(function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});

链接到JS Bin上的示例

— 伊恩·洛克
source
对我来说，这不适用于IE。它对别人有用吗？
— Umesh Rajbhandari 2012年
哪个版本的IE？在IE7上对我来说效果很好。
— 伊恩·洛克
来自jQuery文档“ event.which属性规范化event.keyCode和event.charCode。建议观看event.which作为键盘键输入。”
— Riccardo Galli 2012年
52

我发现这与跨浏览器更兼容：

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
— 耶萨尔
source
1
您的三进制IF可以缩短为：var keycode = event.keyCode || 事件
— 手枪-皮特
29

您可以使用jquery'keydown'事件句柄执行此操作

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
— 纳斯鲁丁
source
11

使用event.key和现代JS！

$(document).keypress(function(event) {
    if (event.key === "Enter") {
        // Do something
    }
});

或没有jQuery：

document.addEventListener("keypress", function onEvent(event) {
    if (event.key === "Enter") {
        // Do something better
    }
});

Mozilla文件

支持的浏览器

— 吉博尔特
source
9

我花了一些时间想出这个解决方案，希望对您有所帮助。

$(document).ready(function(){

  $('#loginforms').keypress(function(e) {
    if (e.which == 13) {
    //e.preventDefault();
    alert('login pressed');
    }
  });

 $('#signupforms').keypress(function(e) {
    if (e.which == 13) {
      //e.preventDefault();
      alert('register');
    }
  });

});
— 塞缪尔·夸梅·安特威
source
7

如果您还想捕获修改后的Enter印刷机（例如ctrl-enter或shift-enter），则对Andrea的答案的较小扩展使helper方法更有用。例如，此变体允许进行绑定，例如：

$('textarea').enterKey(function() {$(this).closest('form').submit(); }, 'ctrl')

当用户按ctrl-enter专注于表单的文本区域时提交表单。

$.fn.enterKey = function (fnc, mod) {
    return this.each(function () {
        $(this).keypress(function (ev) {
            var keycode = (ev.keyCode ? ev.keyCode : ev.which);
            if ((keycode == '13' || keycode == '10') && (!mod || ev[mod + 'Key'])) {
                fnc.call(this, ev);
            }
        })
    })
}

（另请参见Ctrl +在TEXTAREA中输入jQuery）

— 乔恩
source
4

在某些情况下，您可能需要隐藏ENTER页面某个区域的键，而不是页面其他区域的键，例如下面的页面包含带有SEARCH字段的标题 。<div>

我花了点时间弄清楚如何做到这一点，我在这里为社区发布了这个简单而完整的示例。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Test Script</title>
  <script src="/lib/js/jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $('.container .content input').keypress(function (event) {
      if (event.keyCode == 10 || event.keyCode == 13) {
        alert('Form Submission needs to occur using the Submit button.');
        event.preventDefault();
      }
    });
  </script>
</head>
  <body>
    <div class="container">
      <div class="header">
        <div class="FileSearch">
          <!-- Other HTML here -->
        </div>
      </div>
      <div class="content">
        <form id="testInput" action="#" method="post">
        <input type="text" name="text1" />
        <input type="text" name="text2" />
        <input type="text" name="text3" />
        <input type="submit" name="Submit" value="Submit" />
        </form>
      </div>
    </div>
  </body>
</html>

链接到JSFiddle Playground：该[Submit]按钮不执行任何操作，但是ENTER从“文本框”控件之一中按下将不会提交表单。

— jp2code
source
2

由于该keypress事件未包含在任何官方规范中，因此使用该事件时遇到的实际行为可能会因浏览器，浏览器版本和平台而异。

$(document).keydown(function(event) {
  if (event.keyCode || event.which === 13) {
    // Cancel the default action, if needed
    event.preventDefault();
    //call function, trigger events and everything tou want to dd . ex : Trigger the button element with a click
    $("#btn").trigger('click');
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<button id="btn" onclick="console.log('Button Pressed.')">&nbsp</button>
展开摘要

我希望它会有用！

— Zoe_NS
source
请注意，之所以keypress不在规格范围之内（是因为不再推荐使用该规范（MDN））。
— YellowAfterlife
所以，我编辑了... tnx <3
— Zoe_NS
0

检测用户是否按下Enter的简单方法是使用密钥号，输入密钥号= 13来检查设备中的密钥值

$("input").keypress(function (e) {
  if (e.which == 32 || (65 <= e.which && e.which <= 65 + 25)
                    || (97 <= e.which && e.which <= 97 + 25)) {
    var c = String.fromCharCode(e.which);
    $("p").append($("<span/>"))
          .children(":last")
          .append(document.createTextNode(c));
  } else if (e.which == 8) {
    // backspace in IE only be on keydown
    $("p").children(":last").remove();
  }
  $("div").text(e.which);
});

通过按Enter键，您将得到13的结果。使用键值，您可以调用函数或做任何您想做的事

        $(document).keypress(function(e) {
      if(e.which == 13) {
console.log("User entered Enter key");
          // the code you want to run 
      }
    });

如果您想在按下输入键后定位按钮，则可以使用代码 

    $(document).bind('keypress', function(e){
  if(e.which === 13) { // return
     $('#butonname').trigger('click');
  }
});

希望对你有帮助

— 用户名
source
0

我认为最简单的方法是使用香草 javacript：

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
— 段沃克
source
0 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
— TayfunAçıkgöz
source
3
您能否添加一些解释性注释来解释询问者代码的工作原理-谢谢。
— SaschaM78 '19
0

我用过$(document).on("keydown")。

在某些浏览器keyCode上不受支持。同样，which如果keyCode不支持，则需要使用which，反之亦然。

$(document).on("keydown", function(e) {
  const ENTER_KEY_CODE = 13;
  const ENTER_KEY = "Enter";
  var code = e.keyCode || e.which
  var key = e.key
  if (code == ENTER_KEY_CODE || key == ENTER_KEY) {
    console.log("Enter key pressed")
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
展开摘要

— 贾斯汀·刘
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.