Html catch, когда пользователь вводит текстовый ввод
Мне просто интересно, как я собираюсь поймать событие, когда пользователь вводит текстовое поле ввода в моем веб-приложении.
Сценарий: у меня есть сетка списков контактов. В верхней части формы пользователь может ввести имя контакта, который они пытаются найти. Когда в текстовом входе больше 1 символа, я хочу начать поиск контактов в системе, содержащих эти символы, введенные пользователем. Поскольку они продолжают вводить данные об изменениях.
Все это действительно простая функция переднего типа (или автозаполнение), но я хочу отключить данные в другом элементе управления.
Я могу получить текст из ввода, как только вход потерял фокус, но это не соответствует ситуации.
Любые идеи?
Спасибо
Ответы
Ответ 1
Используйте событие keyup для захвата значения как пользовательские типы и выполняйте все, что вы делаете, для поиска этого значения:
$('input').on('keyup', function() {
if (this.value.length > 1) {
// do search for this.value here
}
});
Другим вариантом будет событие input
, которое ловит любой ввод, с помощью клавиш, вставки и т.д.
Ответ 2
Почему бы не использовать событие oninput HTML?
<input type="text" oninput="searchContacts()">
Ответ 3
Я использовал бы input 'и propertychange '. Они стреляют по вырезанию и вставке с помощью мыши.
Кроме того, рассмотрите debouncing ваш обработчик событий, чтобы быстрые машинистки не подвергались штрафам за многие обновления DOM.
Ответ 4
см. мою попытку:
вы должны поместить .combo после каждого .input классов.
.input - текстовое поле, а .combo - div
$(".input").keyup(function(){
var val = this.value;
if (val.length > 1) {
//you search method...
}
if (data) $(this).next(".combo").html(data).fadeIn(); else $(this).next(".combo").hide().html("");
});
$(".input").blur(function(){
$(this).next(".combo").hide();
});