731

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

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

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

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

— Крис
источник

ссылка об этом .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
источник

4

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

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

См. Демо @ обнаружение нажатия клавиши ввода на клавиатуре

— Джонатан Клевин
источник

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>

Развернуть фрагмент

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

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

Используйте event.keyи современный JS!

Используйте `event.key`и современный JS!