Прекратить отправку формы ввода ключа при использовании виджета автозаполнения jquery ui - PullRequest
Новая
       6

Прекратить отправку формы ввода ключа при использовании виджета автозаполнения jquery ui

11 голосов
/ 30 августа 2011

У меня есть форма, использующая плагин пользовательского интерфейса jquery для автозаполнения, http://jqueryui.com/demos/autocomplete/,, который работает хорошо, за исключением того, что когда вы нажимаете клавишу ввода, чтобы выбрать элемент в списке автозаполнения, он отправляет форму.

Я использую это на сайте веб-форм .NET, так что может быть обработка javascript, связанная с формой, которую внедряет .NET, которая переопределяет материал jQuery (я размышляю здесь).

Ответы [ 7 ]

15 голосов
/ 30 августа 2011

Вы можете использовать обработчик событий для него. 

$("#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 для списка кодов клавиш

5 голосов
/ 30 августа 2011 
$("#autocomplete_field_id").keypress(function(event){
  var keycode = (event.keyCode ? event.keyCode : event.which);
  if (keycode == '13') {
    event.preventDefault();
    event.stopPropagation();    
  }
});
4 голосов
/ 30 августа 2011

Одним из способов является обработка нажатия клавиши и игнорирование ее, если это клавиша ввода.

2 голосов
/ 25 марта 2013

Если вы все еще хотите, чтобы клавиша ввода отправляла после выбора автозаполнения, 

if (evt.keyCode === 13 && !$('.ui-autocomplete').is(':visible')) {
   $('.ui-button:first').click();
}
evt.stopPropagation();
2 голосов
/ 29 марта 2012

Ответный пост помог мне решить мою проблему. Хотя вы должны заметить, что код ace должен существовать до $('input').autocomplete(*****), в противном случае вы не получите никакого эффекта.

0 голосов
/ 22 мая 2019

Одна строка кода: 

$("#searchField").on('keypress', (event) => event.which !== $.ui.keyCode.ENTER);

3 вещи, которые отличаются от принятого ответа:

  1. jQuery нормализует event.which, поэтому нет необходимости проверять на event.keyCode и event.which.
  2. Поскольку вы, очевидно, используете пользовательский интерфейс jQuery, у вас есть доступ к именованным кодам клавиш через $.ui.keyCode, что делает его более читабельным.
  3. Функция стрелки ES6синтаксис еще больше упрощает код.
0 голосов
/ 16 декабря 2018

Вы можете попробовать это: 

<input id="MyTextBox" type="text" onkeydown="return (event.keyCode!=13);" />

Это отключит клавишу ввода только в текстовом поле ввода

...