it-swarm-pt.tech

Algum evento disparado no preenchimento automático?

Eu tenho uma forma bastante simples. Quando o usuário digita um campo de entrada, quero atualizar o que eles digitaram em outro lugar da página. Tudo isso funciona bem. Vinculei a atualização aos eventos keyup, change e click.

O único problema é que, se você selecionar uma entrada na caixa de preenchimento automático do navegador, ela não será atualizada. Existe algum evento que é acionado quando você seleciona entre o preenchimento automático (aparentemente não é change nem click). Observe que, se você selecionar na caixa de preenchimento automático e o desfoque no campo de entrada, a atualização será acionada. Gostaria que fosse acionado assim que o preenchimento automático.

Veja: http://jsfiddle.net/pYKKp/ (esperamos que você tenha preenchido muitos formulários no passado com uma entrada chamada "email").

HTML:

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

CSS:

div { 
    float: right; 
} 

Roteiro:

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

Eu recomendo usar monitorEvents. É uma função fornecida pelo console javascript em inspetor da web e firebug que imprime todos os eventos gerados por um elemento. Aqui está um exemplo de como você o usaria:

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

No seu caso, tanto o Firefox como o Opera geram um evento input ) quando o usuário seleciona um item no menu suspenso de preenchimento automático. change é produzido depois que o usuário altera o foco.O último Chrome gera um evento semelhante.

Um gráfico detalhado de compatibilidade do navegador pode ser encontrado aqui:
https://developer.mozilla.org/pt-BR/docs/Web/Events/input

68
Xavi

Aqui está uma solução incrível.

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

Eu testei com Chrome e Firefox e também funcionará para outros navegadores.

Eu tentei muitos eventos com muitos elementos, mas somente isso é acionado quando você seleciona o preenchimento automático.

Espero que isso economize o tempo de alguém.

17
Anand Singh

Adicione "desfoque". funciona em todos os navegadores!

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

Detectando o preenchimento automático na entrada do formulário com jQuery OR JAVASCRIPT

sando: Evento entrada. Para selecionar sugestões de valor (entrada ou área de texto)

POR EXEMPLO PARA PEDIDO:

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

});

POR EXEMPLO PARA JAVASCRIPT:

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

Essa consulta ajax inicial ...

2
Franklin CI

Como Xavi explicou, não existe uma solução 100% entre navegadores para isso, então criei um truque por conta própria para isso (5 etapas a seguir):
1.. Preciso de duas novas matrizes:

window.timeouts     = new Array();
window.memo_values  = new Array();


2. no foco no texto de entrada que eu quero acionar (no seu caso "email", no meu exemplo "name") Defino um intervalo, por exemplo, usando jQuery (não é necessário pensar):

jQuery('#name').focus(function ()
{
    var id = jQuery(this).attr('id');
    window.timeouts[id] = setInterval('onChangeValue.call(document.getElementById("'+ id +'"), doSomething)', 500);
});


3. em desfoque Eu removo o intervalo: (sempre usando jQuery, não é necessário pensar nisso) e verifico se o valor mudou

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. Agora, a principal função que verifica as alterações é a seguinte

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

Nota importante: você pode usar "this" dentro da função acima, referindo-se ao seu elemento HTML de entrada acionada. Um ID deve ser especificado para que essa função funcione e você pode transmitir uma função, um nome de função ou uma cadeia de comandos como retorno de chamada.


5. Finalmente, você pode fazer algo quando o valor de entrada for alterado, mesmo quando um valor for selecionado em uma lista suspensa de preenchimento automático

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

Nota importante: novamente, você usa "this" dentro da função acima, referindo-se ao elemento HTML de entrada acionado.

TRABALHANDO COM LIBERDADE !!!
Eu sei que parece complicado, mas não é.
Eu preparei um rabeca para você, a entrada a ser alterada é denominada "nome", portanto, se você digitar seu nome em um formulário on-line, poderá ter uma lista suspensa de preenchimento automático do seu navegador testar.

2
Luca Borrione

A única maneira certa é usar um intervalo.

A resposta de Luca é muito complicada para mim, então criei minha própria versão curta que, espero, ajudará alguém (talvez até eu no futuro):

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

Testado no Chrome, Mozilla e até no IE.

1
Sorin C

Percebi via monitorEvents que pelo menos em Chrome o evento keyup é acionado antes o evento de preenchimento automático input). Em uma entrada normal do teclado, a sequência é keydowninputkeyup, então depois a entrada.

O que eu fiz é então:

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

Precisa ser verificado com outro navegador, mas isso pode ser uma maneira sem intervalos.

1
Björn Grambow

Não acho que você precise de um evento para isso: isso acontece apenas uma vez e não há um bom suporte para todo o navegador, como mostra a resposta do @xavi.

Basta adicionar uma função depois de carregar o corpo que verifica os campos uma vez quanto a alterações no valor padrão ou, se é apenas uma questão de copiar um determinado valor para outro local, basta copiá-lo para garantir que ele seja inicializado corretamente.

0
Nanne