Произошло ли событие при автозаполнении?

Question

У меня довольно простая форма. Когда пользователь вводит в поле ввода, я хочу обновить то, что они напечатали где-то еще на странице. Это все отлично работает. Я связал обновление с событиями keyup, change и click.

Единственная проблема заключается в том, что если вы выберете ввод в окне автозаполнения браузера, он не обновится. Есть ли какое-либо событие, которое срабатывает, когда вы выбираете из автозаполнения (по-видимому, ни change, ни click). Обратите внимание, что если вы выберете в поле автозаполнения поле ввода blur , обновление будет запущено. Я хотел бы, чтобы он был запущен, как только автозаполнение.

См .: http://jsfiddle.net/pYKKp/ (надеюсь, в прошлом вы заполнили множество форм с помощью ввода "email").

HTML:

<input name="email" /> 
<div id="whatever">&lt;whatever></div> 

CSS:

div { 
    float: right; 
} 

Сценарий:

$("input").on('keyup change click', function () { 
   var v = $(this).val(); 
    if (v) { 
     $("#whatever").text(v);   
    }  
    else { 
        $("#whatever").text('<whatever>'); 
    } 
}); 

Answer 1

Я рекомендую использовать monitorEvents. Это функция, предоставляемая консолью javascript в веб-инспекторе и firebug , которая распечатывает все события, сгенерированные элементом. Вот пример того, как вы бы это использовали:

monitorEvents($("input")[0]);

В вашем случае и Firefox, и Opera генерируют событие input, когда пользователь выбирает элемент из выпадающего списка автозаполнения. В IE7-8 событие change генерируется после того, как пользователь меняет фокус. Последний Chrome генерирует подобное событие.

Подробную таблицу совместимости браузера можно найти здесь:
https://developer.mozilla.org/en-US/docs/Web/Events/input

Answer 2

Вот отличное решение.

$('html').bind('input', function() {
    alert('test');
});

Я тестировал с Chrome и Firefox, и он также будет работать для других браузеров.

Я перепробовал много событий со многими элементами, но только это срабатывает, когда вы выбираете автозаполнение.

Надеюсь, это сэкономит время.

Answer 3

Добавить «размытие». работает во всех браузерах!

$("input").on('blur keyup change click', function () {

Answer 4

Обнаружение автозаполнения при вводе формы с помощью jQuery ИЛИ JAVASCRIPT

Использование: Событие ввод .Для выбора (ввода или текстовой области) значения предложения

ДЛЯ ПРИМЕРА ДЛЯ JQUERY:

$(input).on('input', function() { 
alert("Number selected ");

});

ДЛЯ ПРИМЕРА ДЛЯJAVASCRIPT:

<input type="text"  onInput="affiche(document.getElementById('something').text)" name="Somthing" />

Это начало ajax-запроса ...

Answer 5

Как объяснил Хави , для этого не существует 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-элемент.

РАБОЧАЯ СКРИПКА !!!
Я знаю, это звучит сложно, но это не так.
Я подготовил для вас рабочую скрипку , имя для изменения называется «имя», поэтому, если вы когда-либо ввели свое имя в онлайн-форму, у вас может появиться выпадающий список автозаполнения вашего браузера для проверки.

Answer 6

Я понял с помощью 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();})

Требуется проверить в другом браузере, но это может быть способом без интервалов.

Answer 7

Единственный верный способ - использовать интервал.

Ответ Луки слишком сложен для меня, поэтому я создал собственную короткую версию, которая, надеюсь, поможет кому-то (возможно, даже мне в будущем):

    $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.

Answer 8

Я не думаю, что вам нужно событие для этого: это происходит только один раз, и нет хорошей поддержки для всего браузера, как показывает ответ @xavi.

Просто добавьте функцию после загрузки тела, которое проверяет поля один раз на наличие изменений в значении по умолчанию, или, если это просто вопрос копирования определенного значения в другое место, просто скопируйте его, чтобы убедиться, что оно инициализировано правильно.