Любое событие, вызванное автозаполнением?
У меня довольно простая форма. Когда пользователь вводит в поле ввода, я хочу обновить то, что они набрали где-то еще на странице. Все это прекрасно работает. Я привязал обновление к событиям keyup
, change
и click
.
Единственная проблема заключается в том, что если вы выберете ввод из окна автозаполнения браузера, он не обновится. Есть ли какое-либо событие, которое срабатывает при выборе из автозаполнения (это, по-видимому, ни change
, ни click
). Обратите внимание: если вы выберете из поля автозаполнения и размываете поле ввода, обновление будет активировано. Я хотел бы, чтобы он срабатывал сразу после автозаполнения.
Смотрите: http://jsfiddle.net/pYKKp/ (надеюсь, вы заполнили много форм в прошлом с помощью ввода с именем "email" ).
HTML:
<input name="email" />
<div id="whatever"><whatever></div>
CSS
div {
float: right;
}
Script:
$("input").on('keyup change click', function () {
var v = $(this).val();
if (v) {
$("#whatever").text(v);
}
else {
$("#whatever").text('<whatever>');
}
});
Ответы
Ответ 1
Я рекомендую использовать monitorEvents
. Это функция, предоставляемая консолью javascript как в веб-инспекторе, так и firebug, который выводит все события, которые генерируются элементом. Вот пример того, как вы его используете:
monitorEvents($("input")[0]);
В вашем случае Firefox и Opera генерируют событие input
, когда пользователь выбирает элемент из раскрывающегося списка автозаполнения. В IE7-8 событие change
создается после изменения пользователем фокуса. Последний Chrome создает аналогичное событие.
Подробную таблицу совместимости браузера можно найти здесь:
https://developer.mozilla.org/en-US/docs/Web/Events/input
Ответ 2
Вот удивительное решение.
$('html').bind('input', function() {
alert('test');
});
Я тестировал Chrome и Firefox, а также работал для других браузеров.
Я пробовал много событий со многими элементами, но только это срабатывает при выборе из автозаполнения.
Надеюсь, это сэкономит некоторое время.
Ответ 3
Как Xavi объяснил, что для этого нет 100% -ного кросс-браузера, поэтому я создал трюк самостоятельно (5 шагов для продолжения):
1. Мне нужно несколько новых массивов:
window.timeouts = new Array();
window.memo_values = new Array();
2. в фокусе ввода текста, который я хочу вызвать (в вашем случае "электронная почта", в моем примере "имя" ). Я устанавливаю интервал, например, используя jQuery (не нужно думать):
jQuery('#name').focus(function ()
{
var id = jQuery(this).attr('id');
window.timeouts[id] = setInterval('onChangeValue.call(document.getElementById("'+ id +'"), doSomething)', 500);
});
3. при размытии Я удаляю интервал: (всегда с помощью jQuery не нужно думать), и я проверяю, изменилось ли значение
jQuery('#name').blur(function ()
{
var id = jQuery(this).attr('id');
onChangeValue.call(document.getElementById(id), doSomething);
clearInterval(window.timeouts[id]);
delete window.timeouts[id];
});
4. Теперь основная функция, которая проверяет изменения, следующая
function onChangeValue(callback)
{
if (window.memo_values[this.id] != this.value)
{
window.memo_values[this.id] = this.value;
if (callback instanceof Function)
{
callback.call(this);
}
else
{
eval( callback );
}
}
}
Важное примечание: вы можете использовать "this" внутри вышеуказанной функции, ссылаясь на ваш инициированный входной элемент HTML. Для работы этой функции должен быть указан идентификатор, и вы можете передать функцию или имя функции или строку команды в качестве обратного вызова.
5. Наконец, вы можете что-то сделать, когда значение ввода изменяется, даже если значение выбрано из раскрывающегося списка автозаполнения
function doSomething()
{
alert('got you! '+this.value);
}
Важное примечание: снова вы используете "this" внутри указанной выше функции, ссылаясь на ваш инициированный входной элемент HTML.
РАБОЧИЙ FIDDLE!!!
Я знаю, это звучит сложно, но это не так.
Я подготовил рабочую скрипту для вас, вход для изменения называется "имя", поэтому, если вы когда-либо ввели свое имя в онлайн-форме, вы можете у вас есть раскрывающийся список автозаполнения вашего браузера для тестирования.
Ответ 4
Добавьте "размытие". работает во всех браузерах!
$("input").on('blur keyup change click', function () {
Ответ 5
Обнаружение автозаполнения ввода формы с помощью jQuery ИЛИ JAVASCRIPT
Использование: Событие input. Чтобы выбрать предложения (ввод или текстовое поле)
ДЛЯ ПРИМЕРЫ ДЛЯ JQUERY:
$(input).on('input', function() {
alert("Number selected ");
});
ПРИМЕР ДЛЯ JAVASCRIPT:
<input type="text" onInput="affiche(document.getElementById('something').text)" name="Somthing" />
Этот запуск ajax-запроса...
Ответ 6
Я не думаю, что для этого вам нужно событие: это происходит только один раз, и для этого нет хорошей поддержки браузера, как показано в ответе @xavi.
Просто добавьте функцию после загрузки тела, который проверяет поля один раз для любых изменений значения по умолчанию, или если это просто вопрос копирования определенного значения в другое место, просто скопируйте его, чтобы убедиться, что он правильно инициализирован.
Ответ 7
Единственный верный способ - использовать интервал.
Ответ Luca слишком сложный для меня, поэтому я создал свою собственную короткую версию, которая, надеюсь, поможет кому-то (может быть, даже мне в будущем):
$input.on( 'focus', function(){
var intervalDuration = 1000, // ms
interval = setInterval( function(){
// do your tests here
// ..................
// when element loses focus, we stop checking:
if( ! $input.is( ':focus' ) ) clearInterval( interval );
}, intervalDuration );
} );
Протестировано в Chrome, Mozilla и даже в IE.
Ответ 8
Я понял через monitorEvents
, что по крайней мере в Chrome событие keyup
запускается перед событием автозаполнения input
. На обычном вводе клавиатуры последовательность keydown
input
keyup
, поэтому после введите.
Тогда я сделал следующее:
let myFun = ()=>{ ..do Something };
input.addEventListener('change', myFun );
//fallback in case change is not fired on autocomplete
let _k = null;
input.addEventListener( 'keydown', (e)=>_k=e.type );
input.addEventListener( 'keyup', (e)=>_k=e.type );
input.addEventListener( 'input', (e)=>{ if(_k === 'keyup') myFun();})
Требуется проверить с другим браузером, но это может быть способ без интервалов.