Любое событие срабатывает при автозаполнении?



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



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



см.:http://jsfiddle.net/pYKKp/ (надеюсь, вы заполнили много форм в прошлом с вводом под названием "электронная почта").



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>');
}
});
746   8  

8 ответов:

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

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

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

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

вот удивительное решение.

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

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

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

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

добавить "размытость". работает во всех браузерах!

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

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

использование: событие вход. Чтобы выбрать (input или textarea) значение предложения

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

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

});

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

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

этот запрос запуска ajax ...

как Хави объяснил, что для этого нет решения 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 );
        }
    }
}

важное замечание: вы можете использовать "это" внутри вышеуказанной функции, ссылаясь на ваш триггер ввода HTML-элемента. Чтобы эта функция работала, необходимо указать идентификатор, и вы можете передать функцию, имя функции или строку команды в качестве обратного вызова.


5. наконец, вы можете сделать что-то, когда входное значение изменяется, даже если значение выбрано из выпадающего списка автозаполнения

function doSomething()
{
    alert('got you! '+this.value);
}

важное замечание: снова вы используете "это" внутри вышеуказанной функции, ссылаясь на ваш инициированный элемент ввода HTML.

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

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

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

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

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

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

я понял, что через monitorEvents что хотя бы в Chrome то keyup событие до автозаполнение input событие. На обычном клавиатурном вводе последовательность keydowninputkeyup, Так что после вход.

то, что я сделал тогда:

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();})

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

Comments

    Ничего не найдено.