Визначте клавішу Enter у полі для введення тексту


299

Я намагаюсь виконати функцію, якщо натиснути клавішу Enter під час певного входу.

Що я роблю неправильно?

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

Чи є кращий спосіб зробити це, який би сказав, якщо ввести натиснуту .input1функцію do?


1
Можливий дублікат події клавіші Enter в JavaScript
Bae

Відповіді:


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


//keyup not compatible with Jquery select(), Keydown is.

У якому браузері ви його тестували? Я думаю, що більш старі версії IE не запускають події клавішного документа (хоч і не впевнені в цьому).
Джозеф Сільбер

2
Ваш код не працював, тому що ви використовували .is () і потрібно ===, а не ==. Дивіться мою відповідь для отримання більш детальної інформації.
wesbos

6
@jQuerybeast Це не потрібно і event.keyCodeє Number, тому JavaScript буде робити ті ж кроки з ==або ===.
alex

7
напр., які оголошені кориснішими перехресними браузерами
mohammad eslahi sani

2
Властивості which, code, charCodeі keyCodeзасуджуються developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent , будь ласка , додати актуальну інформацію на вашу відповідь.
Сасай

120

event.key === "Ввести"

Більш свіжі та набагато чистіші: використання 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

Підтримувані браузери


6
Кудо для простої версії javascript, не впевнений, чому всі інші в jquery
Капітан Фантастичний

7
Тому що ОП поставив свій приклад код у 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!')
    }
  });

Щоб розібратися, який keyCode вам потрібен, скористайтеся веб-сайтом http://keycode.info


Дякую. Я дізнався щось нове. До речі, я використовував .is () ВЕЛИКОГО разів, тому це не логіка, не працювати. Також ==, я знову використовував два == для інших ситуацій
jQuerybeast

np, ви завжди повинні використовувати ===
wesbos

12

Спробуйте це виявити Enterклавішу, натиснуту у текстовому полі.

$(function(){

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

});

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

Найкращий спосіб, який я знайшов, - це використання keydown( keyupце не добре працює для мене).

Примітка. Я також відключив подання форми, тому що зазвичай, коли вам подобається робити якісь дії при натисканні клавіші Enter, ви думаєте, що вам не подобається - це надіслати форму :)

$('input').keydown( function( event ) {
    if ( event.which === 13 ) {
        // Do something
        // Disable sending the related form
        event.preventDefault();
        return false;
    }
});

event.keyCode - застарілий event.which ні, тому це краще
Alex

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
            }
        });
    });

0

Цей код обробляв кожен вхід для мене на всьому сайті. Він перевіряє наявність клавіші введення в поле Вхід і не зупиняється на TEXTAREA або інших місцях.

$(document).on("keydown", "input", function(e){
 if(e.which == 13){
  event.preventDefault();
  return false;
 }
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.