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

330

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

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

javascript forms keypress dom-events enter Shyju
источник

Ответы:

445 
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, все равно нуждается в полифилле .

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

мистифицировать
источник
4
Что именно вы подразумеваете под определенным пользователем? Мол, пользователь вводит какой-то скрипт в текстовое поле, и вы запускаете его с помощью Eval () ???
Джош
1
Это ситуация, когда PreventDefualt может быть использован?
12
@ Stuart.Sklinar - Выполнение eval при вводе данных, введенных пользователем в браузер, не дает им больше контроля, чем если бы они открывали командную консоль в Chrome / FF / IE и сами вводили скрипт. Единственный человек, которому они могут навредить - это они сами ... если, конечно, вы не применяете меры безопасности на сервере. Это совсем другая проблема.
Джош
1
@SteelBrain - Опять же, давая кому-то текстовое поле, которое он может ввести, а затем evalсодержимое, нажав кнопку, ничем не отличается от того, если бы он открыл инструменты разработчика и сделал это. Если бы это было что-то, что было сохранено в БД и могло быть открыто ДРУГОЙ пользователем, это было бы большим делом, но это проблема, которая полностью независима от этого маленького фрагмента.
Джош
5
keyCodeтеперь устарела
Джон
138

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

function (event) {
    if (event.which == 13 || event.keyCode == 13) {
        //code to execute here
        return false;
    }
    return true;
};
Agiagnoc
источник
11
Почему и event.which, и event.keyCode?
Алекс Сперлинг
35
Некоторые браузеры поддерживают whichдругие keyCode. Хорошей практикой является включение обоих.
user568109
Также используйте keydownсобытие вместо keyupилиkeypress
manish_s
@Agiagnoc, но к какому событию это должно быть прикреплено?
Дон Чидл
2
@manish, нажатие клавиш дает вам больше информации, чтобы играть, чем нажатие клавиши вверх / вверх. stackoverflow.com/a/9905293/322537
Fzs2
78

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

$('input[type=text]').on('keydown', function(e) {
    if (e.which == 13) {
        e.preventDefault();
    }
});
ковбой
источник
1
Я не мог заставить это работать. Обработчик запускает, но preventDefault, похоже, не останавливает отправку формы, по крайней мере, в Chrome.
Дрю Ноукс
19
Вы должны использовать событие keydown вместо keyup:$('input[type=text]').on('keydown', function(e) { if (e.which == 13) { e.preventDefault(); } });
Петар Дончев Маринов
2
keyup запускается ПОСЛЕ отправки, и поэтому не может отменить его.
Пьер-Оливье Варес
И keyup, и keypress работали на меня. Я пошел с нажатием клавиши. Спасибо!
markiyanm
'keydown'правильно, как утверждают другие комментаторы. Так как это не было изменено, я обновлю ответ. Я использовал этот ответ и застрял на некоторое время, пока не вернулся и не посмотрел комментарии.
Мэтт К
71

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 Docs

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

Gibolt
источник
Искал это. увидел свойство ключа в журнале консоли $ event. думал, что это может быть более надежным
Тацу
это не просто макрос или псевдоним? есть ли какое-то преимущество с точки зрения производительности при использовании этого кода?
clockw0rk
1
keyCodeустарела. Это более читабельно и
легко
17

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

<form onsubmit="javascript:myfunc();return false;" >
rpkelly
источник
Я не могу отменить отправку, так как у меня есть другая форма,
отправленная
5
Да, ты можешь. Javascript - это язык, основанный на прототипах. document.forms ["form_name"]. onsubmit = fucntion () {}
the_drow
У меня есть другая процедура удаления, которая будет запущена при
отправке формы
17

Реагировать JS решение

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


 <div>
    <Input type="text"
       ref = "input"
       placeholder="hiya"
       onKeyPress={this.handleChange}
    />
 </div>
caffeinescript
источник
9

Так что, возможно, лучшим решением, которое охватит как можно больше браузеров и будет перспективным, будет 

if (event.which === 13 || event.keyCode === 13 || event.key === "Enter")
Мэтт Доран
источник
6

Если вы хотите сделать это с помощью чисто 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 ");
    }
});
ДИНА ТАКЛИТ
источник
5

Ниже код добавит слушателя для 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>

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

Хите саху
источник
3

Решение 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();
});

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

Хим
источник
3

Гораздо более простой и эффективный способ с моей точки зрения должен быть: 

function onPress_ENTER()
{
        var keyPressed = event.keyCode || event.which;

        //if ENTER is pressed
        if(keyPressed==13)
        {
            alert('enter pressed');
            keyPressed=null;
        }
        else
        {
            return false;
        }
}
Танос
источник
2

Использование TypeScript, и избежать многократных вызовов функции

let el1= <HTMLInputElement>document.getElementById('searchUser');
el1.onkeypress = SearchListEnter;

function SearchListEnter(event: KeyboardEvent) {
    if (event.which !== 13) {
        return;
    }
    // more stuff
}
Вагнер Перейра
источник
Этому вопросу больше восьми лет. Машинопись тогда не существовала. Так ты уверен, что не отвечаешь на другой вопрос?
Нико Хаазе
2

Немного просто

Не отправляйте форму по нажатию клавиши «Enter»:

<form id="form_cdb" onsubmit="return false">

Выполните функцию по нажатию клавиши «Ввод»:

<input type="text" autocomplete="off" onkeypress="if(event.key === 'Enter') my_event()">
RBZ
источник
1

родной JS (получить API)

document.onload = (() => {
    alert('ok');
    let keyListener = document.querySelector('#searchUser');
    // 
    keyListener.addEventListener('keypress', (e) => {
        if(e.keyCode === 13){
            let username = e.target.value;
            console.log(`username = ${username}`);
            fetch(`https://api.github.com/users/${username}`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((user)=>{
                console.log(`user = ${user}`);
            });
            fetch(`https://api.github.com/users/${username}/repos`,{
                data: {
                    client_id: 'xxx',
                    client_secret: 'xxx'
                }
            })
            .then((repos)=>{
                console.log(`repos = ${repos}`);
                for (let i = 0; i < repos.length; i++) {
                     console.log(`repos ${i}  = ${repos[i]}`);
                }
            });
        }else{
            console.log(`e.keyCode = ${e.keyCode}`);
        }
    });
})();
<input _ngcontent-inf-0="" class="form-control" id="searchUser" placeholder="Github username..." type="text">
Развернуть фрагмент

xgqfrms
источник
Почему client_id и т. Д. Были включены сюда? Законен ли код?
eddyparkinson
1 
<form id="form1" runat="server" onkeypress="return event.keyCode != 13;">

Добавьте этот код на свою HTML-страницу ... он отключится ... Кнопка ввода ..

Ахилеш Сингх
источник
0 
<div class="nav-search" id="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" placeholder="Search ..." class="nav-search-input" id="search_value" autocomplete="off" />
                <i class="ace-icon fa fa-search nav-search-icon"></i>
            </span>
            <input type="button" id="search" value="Search" class="btn btn-xs" style="border-radius: 5px;">
        </form>

</div>

<script type="text/javascript">
    $("#search_value").on('keydown', function(e) {
        if (e.which == 13) {
             $("#search").trigger('click');
            return false;
        }
    });
    $("#search").on('click',function(){
        alert('You press enter');
    });
</script>
Мизанур Рахаман
источник
0

Кросс-браузерное решение

Некоторые старые браузеры реализовали события нажатия клавиш нестандартным способом.

KeyBoardEvent.key - это способ, которым он должен быть реализован в современных браузерах.

which и в keyCodeнастоящее время устарели, но, тем не менее, не мешает проверять эти события, так что код работает для пользователей, которые все еще используют более старые браузеры, такие как IE.

В isKeyPressedфункции проверки , если нажата клавиша была войти и event.preventDefault()мешает форма от представления.

  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }

Минимальный рабочий пример

JS

function isKeyPressed(event, expectedKey, expectedCode) {
  const code = event.which || event.keyCode;

  if (expectedKey === event.key || code === expectedCode) {
    return true;
  }
  return false;
}

document.getElementById('myInput').addEventListener('keydown', function(event) {
  if (isKeyPressed(event, 'Enter', 13)) {
    event.preventDefault();
    console.log('enter was pressed and is prevented');
  }
});

HTML

<form>
  <input id="myInput">
</form>

https://jsfiddle.net/tobiobeck/z13dh5r2/

Тоби Обек
источник