Введите событие нажатия клавиши в JavaScript - PullRequest
Новая
       65

Введите событие нажатия клавиши в JavaScript

272 голосов
/ 25 мая 2009

У меня есть form с двумя текстовыми полями, одно выберите выпадающий и один переключатель . Когда нажата клавиша enter , я хочу вызвать функцию javascript (определенную пользователем), но когда я нажимаю ее, форма отправляется.

Как предотвратить отправку form при нажатии клавиши enter ?

Ответы [ 17 ]

388 голосов
/ 25 мая 2009 
if(characterCode == 13)
{
    return false; // returning false will prevent the event from bubbling up.
}
else
{
    return true;
}

Хорошо, представьте, что у вас есть следующее текстовое поле в форме: 

<input id="scriptBox" type="text" onkeypress="return runScript(event)" />

Чтобы запустить какой-либо «определенный пользователем» скрипт из этого текстового поля при нажатии клавиши ввода, и чтобы он не отправлял форму, вот некоторый пример код. Обратите внимание, что эта функция не выполняет проверку ошибок и, скорее всего, будет работать только в IE. Чтобы сделать это правильно, вам нужно более надежное решение, но вы получите общее представление. 

function runScript(e) {
    //See notes about 'which' and 'key'
    if (e.keyCode == 13) {
        var tb = document.getElementById("scriptBox");
        eval(tb.value);
        return false;
    }
}

возвращение значения функции предупредит обработчик события, чтобы он не генерировал событие дальше, и предотвратит дальнейшую обработку события нажатия клавиши.

Примечание:

Было отмечено, что keyCode является , теперь устарело . Следующая лучшая альтернатива which имеет также устарела .

К сожалению, популярный стандарт key, который широко поддерживается современными браузерами, имеет некоторые хитроумные поведения в IE и Edge . Все, что старше IE11, все равно нуждается в polyfill .

Более того, хотя устаревшее предупреждение довольно зловеще в отношении keyCode и which, его удаление может привести к серьезным изменениям в неисчислимом количестве устаревших веб-сайтов. По этой причине маловероятно, что они скоро куда-нибудь отправятся.

122 голосов
/ 20 января 2012

Используйте как event.which, так и event.keyCode: 

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
71 голосов
/ 08 июня 2012

Если вы используете jQuery: 

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
45 голосов
/ 14 сентября 2017

event.key === "Enter"

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

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

Документы Mozilla

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

18 голосов
/ 16 июня 2015

Обнаружена клавиша Enter, нажатая на весь документ: 

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

http://jsfiddle.net/umerqureshi/dcjsa08n/3/

17 голосов
/ 25 мая 2009

Переопределите действие onsubmit формы для вызова вашей функции и добавьте return false после нее, то есть: 

<form onsubmit="javascript:myfunc();return false;" >
13 голосов
/ 08 января 2016

Реакционный раствор 

 handleChange: function(e) {
    if (e.key == 'Enter') {
      console.log('test');
    }


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
5 голосов
/ 14 декабря 2016

Ниже кода добавит слушатель для клавиши ENTER на всю страницу.

Это может быть очень полезно на экранах с одной кнопкой действия, например, «Войти», «Зарегистрироваться», «Отправить» и т. Д. 

<head>
        <!--Import jQuery IMPORTANT -->
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

         <!--Listen to Enter key event-->
        <script type="text/javascript">

            $(document).keypress(function (e) {
                if (e.which == 13 || event.keyCode == 13) {
                    alert('enter key is pressed');
                }
            });
        </script>
    </head>

Проверено на всех браузерах.

5 голосов
/ 17 июня 2018

, если вы хотите сделать это с использованием сценария purly java, вот пример, который отлично работает

Допустим, это ваш HTML-файл 

<!DOCTYPE html>
<html>
  <body style="width: 500px">
    <input type="text" id="textSearch"/> 
      <script type="text/javascript" src="public/js/popup.js"></script>
  </body>
</html>

в вашем popup.js файле просто используйте эту функцию 

var input = document.getElementById("textSearch");
input.addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        alert("yes it works,I'm happy ");
    }
});
3 голосов
/ 08 января 2014

Решение jQuery.

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

$(selector).keyup(function(e){
  /*
   * Delay the enter key form submit till after the hidden
   * input is updated.
   */

  // No need to do anything if it's not the enter key
  // Also only e.which is needed as this is the jQuery event object.
  if (e.which !== 13) {
       return;
  }

  // Prevent form submit
  e.preventDefault();

  // Trigger the blur event.
  this.blur();

  // Submit the form.
  $(e.target).closest('form').submit();
});

Было бы неплохо получить более общую версию, которая запускает все отложенные события, а не только отправку формы.

Страница:
...