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

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

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

EDIT: похоже, мне нужно использовать keypress() метод.

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

625
javascript javascript-events jquery keyboard-events

13 ответов

весь смысл jQuery в том, что вам не нужно беспокоиться о различиях в браузере. Я уверен, что вы можете безопасно пойти с enter быть 13 во всех браузерах. Поэтому, имея это в виду, вы можете сделать следующее:

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

Я написал небольшой плагин, чтобы упростить привязку" на клавишу ввода нажата " событие:

$.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!');
})
115

Я не мог получить код, опубликованный @Paolo Bergantino для работы, но когда я изменил его на $(document) и e.which вместо e.keyCode затем я обнаружил, что он работает безупречно.

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

ссылка на пример на JS Bin

59

Я обнаружил, что это более совместимо с кросс-браузером:

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
44

вы можете сделать это, используя дескриптор события jQuery 'keydown'

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
23

здесь нажатие() метод события. Ascii-номер клавиши Enter равен 13 и не зависит от используемого браузера.

8

Я потратил некоторое время, придумывая это решение, я надеюсь, что это поможет кому-то.

$(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');
    }
  });

});
8

незначительное расширение ответа Андреа выше делает вспомогательный метод более полезным, когда вы также можете захотеть захватить модифицированные прессы ввода (например, ctrl-enter или shift-enter). Например, этот вариант допускает привязку типа:

$('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 + Enter jQuery в текстовом поле)

6

в некоторых случаях вам может потребоваться подавить ENTER ключ для определенной области страницы, но не для других областей страницы, как на странице ниже, которая содержит заголовок <div> С поиск

3

попробуйте это, чтобы обнаружить клавишу Enter нажатой.

$(document).on("keypress", function(e){
    if(e.which == 13){
        alert("You've pressed the enter key!");
    }
});

посмотреть демо -@ detect enter нажмите клавишу на клавиатуре

3

использовать 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 Docs

Поддерживаемые Браузеры

2

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

Если вы хотите нацелить кнопку после нажатия клавиши enter, вы можете использовать код 

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

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

0

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

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
0