Как обнаружить нажатие Enter на клавиатуре с помощью jQuery? - PullRequest
Новая
       91

Как обнаружить нажатие Enter на клавиатуре с помощью jQuery?

675 голосов
/ 11 июня 2009

Я хотел бы определить, нажал ли пользователь Введите с помощью jQuery.

Как это возможно? Требуется ли плагин?

РЕДАКТИРОВАТЬ: Похоже, мне нужно использовать метод keypress().

Я хотел бы знать, если кто-нибудь знает, есть ли проблемы с браузером с этой командой - например, есть ли какие-либо проблемы совместимости браузера, о которых я должен знать?

Ответы [ 16 ]

4 голосов
/ 03 декабря 2013

В некоторых случаях вам может потребоваться отключить клавишу ENTER для определенной области страницы, но не для других областей страницы, например на странице ниже, содержащей заголовок * 1004. * <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 на одном из элементов управления Text Box не отправит форму.

1 голос
/ 23 апреля 2019

Использование метода нажатия клавиш для обнаружения нажатия клавиши Enter на клавиатуре с помощью jQuery?

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

        $('#someTextBox').keypress(function(event){
            var keycode = (event.keyCode ? event.keyCode : event.which);
            if(keycode == '13'){
                alert('You pressed a "enter" key in textbox'); 
            }
            event.stopPropagation();
        });
    
<html>
<head>
<title>jQuery keypress() Method To Detect Enter key press or not Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
    <h1>Write something here & press enter</h1>
    <label>TextBox Area: </label>
    <input id="someTextBox" type="text" size="100" />
 
</body>
</html>
0 голосов
/ 07 мая 2019 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
0 голосов
/ 31 января 2019 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
0 голосов
/ 01 декабря 2016

Я думаю, что самый простой способ будет использовать ваниль javacript: 

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
0 голосов
/ 17 апреля 2013

Простой способ определить, нажал ли пользователь клавишу ввода, - это использовать номер клавиши, номер клавиши ввода = 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);
});

нажатием клавиши ввода вы получите результат как 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');
  }
});

Надеюсь, это поможет

Страница:
...