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

731

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

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

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

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

javascript jquery keyboard-events enter jquery-events Крис
источник
ссылка об этом .keypress () | Документация по jQuery API
Хаим Эджи
5
Одна из лучших вещей в средах Javascript - это то, что они по умолчанию должны быть совместимы с разными браузерами. Они обрабатывают проверки совместимости браузера, так что пользователю не нужно. Я не читал исходный код JQuery, но сомневаюсь, что функциональность нажатия клавиш отличается в этом смысле.
Miek
2
единственная проблема совместимости браузера заключается в том, что вы должны использовать e.which вместо e.keyCode для обнаружения кода ascii.
Даниил
1
stackoverflow.com/questions/302122/…
Lemo

Ответы:

1330

Весь смысл jQuery в том, что вам не нужно беспокоиться о различиях между браузерами. Я уверен, что вы можете смело идти в enter13 лет во всех браузерах. Итак, имея это в виду, вы можете сделать это:

$(document).on('keypress',function(e) {
    if(e.which == 13) {
        alert('You pressed enter!');
    }
});
Паоло Бергантино
источник
7
Я ссылаюсь на это, потому что я прочитал это и оставил чесать голову, почему нажатие клавиш не работает с IE. (он не привязывается к $(window)IE) quirksmode.org/dom/events/keys.html
Incognito,
17
e.keyCode не является кросс-браузерным на 100%. используйте e.which, как показано ниже
Даниил
15
Из документации jQuery «Свойство event.which нормализует event.keyCode и event.charCode. Рекомендуется смотреть event.which для ввода с клавиатуры».
Риккардо Галли
20
$ (document) .on ('keypress', function (e) {
user956584
5
Я получаю многократное выполнение данной функции из-за распространения событий (то есть предупреждение выдается дважды). Чтобы остановить это, добавьте e.stopPropagation () в конце функции
dpb
129

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

$.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!');
})
Andrea
источник
Это не работает для меня (я попал #inputна <input>поле)
Рапли Андрас
1
А что если элемент #input будет динамическим?
Jigar7521
@mplungjan не уверен, что вы подразумеваете под "делегированием"
Андреа
$("#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

Ян Рок
источник
Для меня е. Который не работает с IE. Это работает для других?
Умеш Раджбандари
Какая версия IE? У меня отлично работает на IE7.
Ян
Из документации jQuery «Свойство event.which нормализует event.keyCode и event.charCode. Рекомендуется смотреть event.which для ввода с клавиатуры».
Риккардо Галли
52

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

$(document).keypress(function(event) {
    var keycode = event.keyCode || event.which;
    if(keycode == '13') {
        alert('You pressed a "enter" key in somewhere');    
    }
});
jesal
источник
1
Ваш троичный IF может быть сокращен до: var keycode = event.keyCode || event.which;
пистолет-пёт
29

Вы можете сделать это с помощью дескриптора события jquery 'keydown'

   $( "#start" ).on( "keydown", function(event) {
      if(event.which == 13) 
         alert("Entered!");
    });
Насреддин
источник
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 Docs

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

Gibolt
источник
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');
    }
  });

});
Самуэль Кваме Антви
источник
8

Есть метод события keypress () . Номер ascii клавиши Enter равен 13 и не зависит от того, какой браузер используется.

Ричард Симойс
источник
7

Незначительное расширение ответа Андреа, приведенного выше, делает вспомогательный метод более полезным, когда вы также можете захватить измененные нажатия Enter (например, 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 в TEXTAREA )

joeln
источник
4

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

jp2code
источник
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
источник
Отметим, что причина, по которой keypressв спецификации больше нет, заключается в том, что она устарела ( MDN ).
YellowAfterlife
Итак, я отредактировал ... tnx <3
Zoe_NS
0

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

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

user2216399
источник
0

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

document.onkeyup = function(event) {
   if (event.key === 13){
     alert("enter was pressed");
   }
}
Дуан Уокер
источник
0 
$(function(){
  $('.modal-content').keypress(function(e){
    debugger
     var id = this.children[2].children[0].id;
       if(e.which == 13) {
         e.preventDefault();
         $("#"+id).click();
       }
   })
});
Тайфун Аджыкгез
источник
3
Не могли бы вы добавить немного пояснительных комментариев, чтобы объяснить, как работает ваш код - спасибо.
SaschaM78
0 
$(document).keyup(function(e) {
    if(e.key === 'Enter') {
        //Do the stuff
    }
});
AzizAhmad
источник
Это похоже на адаптацию других ответов - не могли бы вы добавить какое-нибудь объяснение, чтобы ваши были такими же интересными, как и другие?
Нико
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>
Развернуть фрагмент

Джастин Лю
источник