Определить клавишу ввода в поле ввода текста

299

Я пытаюсь сделать функцию, если Enter нажата на конкретном входе.

Что я делаю не так?

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

Есть ли лучший способ сделать это, который сказал бы, если Enter нажал на .input1сделать функцию?

jQuerybeast
источник

Ответы:

500
$(".input1").on('keyup', function (e) {
    if (e.keyCode === 13) {
        // Do something
    }
});


//keyup not compatible with Jquery select(), Keydown is.
Джозеф Силбер
источник
В каком браузере вы его тестировали? Я думаю, что старые версии IE не запускают события keyup в документе (хотя и не уверены в этом).
Джозеф Силбер
2
Ваш код не работал, потому что вы использовали .is () и нуждались ===, а не ==. Смотрите мой ответ для более подробной информации.
Wesbos
6
@jQuerybeast Это не нужно , и event.keyCodeесть Number, поэтому JavaScript будет делать те же шаги с ==или ===.
Алекс
7
e. который объявлен более полезным кросс-браузеры
Мохаммад Эслахи Сани
2
Свойства which, code, charCodeи keyCodeосуждаются developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , пожалуйста , добавить актуальную информацию на ваш ответ.
Sasay
120

event.key === "Enter"

Более свежее и намного чище: используйте event.key. Нет больше произвольных числовых кодов!

const node = document.getElementsByClassName(".input")[0];
node.addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // Do work
    }
});

Если вы должны использовать jQuery:

$(document).keyup(function(event) {
    if ($(".input1").is(":focus") && event.key == "Enter") {
        // Do work
    }
});

Mozilla Docs

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

Gibolt
источник
6
Слава для простой версии Javascript, не знаю, почему все остальные в jquery
Капитан Фантастический
7
Потому что OP поместил свой пример кода в jQuery и (как и JavaScript) jQuery помечен.
Tigerrrrr
44
$(document).keyup(function (e) {
    if ($(".input1:focus") && (e.keyCode === 13)) {
       alert('ya!')
    }
 });

Или просто привязать к самому входу

$('.input1').keyup(function (e) {
    if (e.keyCode === 13) {
       alert('ya!')
    }
  });

Чтобы выяснить, какой код ключа вам нужен, используйте сайт http://keycode.info

wesbos
источник
Спасибо. Я узнал что-то новое. Кстати, я использовал .is () ALOT раз, так что это не логика, чтобы не работать. Также ==, снова я использовал два == для других ситуаций
jQuerybeast
np, вы всегда должны использовать ===
wesbos
12

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

$(function(){

$(".input1").keyup(function (e) {
    if (e.which == 13) {
        // Enter key pressed
    }
 });

});
ShankarSangoli
источник
6

Возможно, будет слишком поздно, чтобы ответить на этот вопрос. Но следующий код просто запрещает вводить ключ. Просто скопируйте и вставьте должно работать.

        <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>
Индра Кумар С
источник
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 - нет, так что лучше
Алекс
3

Решение, которое работает для меня, заключается в следующем

$("#element").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        // do something
    }
});
Хорхе Сантос Нил
источник
1

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

$(document).on("keypress", "input", function(e){
    if(e.which == 13){
        alert("Enter key pressed");
    }
});

DEMO

Джонатан Клевин
источник
0
 $(document).ready(function () {
        $(".input1").keyup(function (e) {
            if (e.keyCode == 13) {
                // Do something
            }
        });
    });
Jobelle
источник
0

Этот код обрабатывал каждый ввод для меня на всем сайте. Он проверяет наличие клавиши ВВОДА внутри поля ВВОДА и не останавливается на TEXTAREA или других местах.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
Умар Ниази
источник