Остановка 'enter' отправки формы при использовании jquery ui автозаполнения виджета
У меня есть форма, в которой используется пользовательский плагин jQuery autocomplete, http://jqueryui.com/demos/autocomplete/, который все работает сладко, за исключением случаев, когда вы нажимаете кнопку ввода чтобы выбрать элемент в списке автозаполнения, он отправляет форму.
Я использую это на сайте .NET webforms, поэтому может быть обработка javascript, связанная с формой, которую вводит .NET, которая переопределяет материал jQuery (я размышляю здесь).
Ответы
Ответ 1
На нем можно использовать обработчик событий.
$("#searchTextBox").keypress(function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
return false;
}
});
см.: jQuery Event Keypress: какой ключ был нажат?
также: http://www.cambiaresearch.com/c4/702b8cd1-e5b0-42e6-83ac-25f0306e3e25/javascript-char-codes-key-codes.aspx для списка кодов клавиш
Ответ 2
$("#autocomplete_field_id").keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == '13') {
event.preventDefault();
event.stopPropagation();
}
});
Ответ 3
Один из способов заключается в том, чтобы обрабатывать нажатия клавиш и игнорировать его, если это клавиша ввода.
Ответ 4
Ответ ace post помог мне решить мою проблему. Хотя вы должны заметить, что код ace обеспечивает существование до $('input').autocomplete(*****)
, иначе вы не получите никакого эффекта.
Ответ 5
Если вы все еще хотите ввести ключ ввода, после выбора автозаполнения,
if (evt.keyCode === 13 && !$('.ui-autocomplete').is(':visible')) {
$('.ui-button:first').click();
}
evt.stopPropagation();
Ответ 6
Вы можете попробовать это:
<input id="MyTextBox" type="text" onkeydown="return (event.keyCode!=13);" />
Это отключит клавишу ввода только в поле ввода
Ответ 7
Одна строка кода:
$("#searchField").on('keypress', (event) => event.which !== $.ui.keyCode.ENTER);
3 вещи, которые здесь отличаются от принятого ответа:
- jQuery нормализует
event.which
, поэтому нет необходимости проверять event.keyCode
и event.which
. - Поскольку вы, очевидно, используете пользовательский интерфейс jQuery, у вас есть доступ к кодам именованных ключей через
$.ui.keyCode
, что делает его более читабельным. - Синтаксис функции стрелки ES6 еще больше упрощает код.