javascript - bootstrap - ¿Algún evento desencadenado en autocompletar?

input list html

Question

Tengo una forma bastante simple. Cuando el usuario escribe un campo de entrada, quiero actualizar lo que han escrito en otro lugar de la página. Todo esto funciona bien. He enlazado la actualización a los keyup , change y click .

El único problema es que si selecciona una entrada del cuadro de autocompletar del navegador, no se actualiza. ¿Hay algún evento que se active cuando se selecciona de autocompletar (aparentemente no se change ni hace click ). Tenga en cuenta que si selecciona en el cuadro Autocompletar y difumina el campo de entrada, se activará la actualización. Me gustaría que se activara tan pronto como el autocompletar.

Consulte: http://jsfiddle.net/pYKKp/ (esperamos que haya llenado muchos formularios en el pasado con una entrada llamada "correo electrónico").

HTML:

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

CSS:

div { 
    float: right; 
} 

Guión:

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

Answer 1

Detección de autocompletado en la entrada del formulario con jQuery O JAVASCRIPT

Utilizando: entrada de eventos. Seleccionar sugerencias de valor (input o textarea).

PARA EJEMPLO DE JQUERY:

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

});

POR EJEMPLO PARA JAVASCRIPT:

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

Esta consulta de inicio ajax ...

Answer 2

Añadir "desenfoque". Funciona en todos los navegadores!

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

Answer 3

Aquí hay una solución impresionante.

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

He probado con Chrome y Firefox y también funcionará para otros navegadores.

He intentado muchos eventos con muchos elementos, pero solo esto se activa cuando seleccionas autocompletar.

Espero que ahorre el tiempo de alguien.

Answer 4

Como explicó Xavi , no hay una solución al 100% para todos los navegadores, así que creé un truco por mi cuenta (5 pasos para seguir):
1. Necesito un par de arreglos nuevos:

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

2. Enfocado en el texto de entrada que quiero activar (en su caso, "correo electrónico", en mi ejemplo "nombre"), establezco un intervalo, por ejemplo, utilizando jQuery (no es necesario):

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

3. En el desenfoque elimino el intervalo: (siempre utilizando jQuery no es necesario pensar), y verifico si el valor cambió

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. Ahora, la función principal que verifica los cambios es la siguiente

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: puede usar "esto" dentro de la función anterior, refiriéndose a su elemento HTML de entrada activado. Se debe especificar un ID para que funcione esa función, y puede pasar una función, un nombre de función o una cadena de comandos como devolución de llamada.

5. Finalmente, puede hacer algo cuando se cambia el valor de entrada, incluso cuando se selecciona un valor de una lista desplegable de autocompletar

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

Nota importante: una vez más, use "esto" dentro de la función anterior, refiriéndose al elemento HTML de entrada activado.

FIDDLE DE TRABAJO !!!
Sé que suena complicado, pero no lo es.
Preparé un violín de trabajo para usted, la entrada para cambiar se llama "nombre", por lo que si alguna vez ingresó su nombre en un formulario en línea, es posible que tenga una lista desplegable de autocompletado de su navegador para probar.

Answer 5

Me he dado cuenta a través de monitorEvents que al menos en Chrome el evento keyup se keyup antes que el evento de input autocompletado. En una entrada de teclado normal, la secuencia es keydown input keyup , así que después de la entrada.

Lo que hice es entonces:

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

Debe comprobarse con otro navegador, pero esa puede ser una forma sin intervalos.

Answer 6

No creo que necesites un evento para esto: esto sucede solo una vez, y no hay un buen soporte en todo el navegador para esto, como lo muestra la respuesta de @xavi.

Simplemente agregue una función después de cargar el cuerpo que verifica los campos una vez por cualquier cambio en el valor predeterminado, o si solo se trata de copiar un determinado valor en otro lugar, simplemente cópielo para asegurarse de que se inicializa correctamente.

Answer 7

Recomiendo usar monitorEvents . Es una función proporcionada por la consola de javascript en el inspector web y firebug que imprime todos los eventos generados por un elemento. Aquí hay un ejemplo de cómo lo usarías:

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

En su caso, tanto Firefox como Opera generan un evento de input cuando el usuario selecciona un elemento del menú desplegable de autocompletar. En IE7-8 se produce un evento de change después de que el usuario cambia el enfoque. El último Chrome genera un evento similar.

Una tabla detallada de compatibilidad del navegador se puede encontrar aquí:
https://developer.mozilla.org/en-US/docs/Web/Events/input

Answer 8

La única manera segura es usar un intervalo.

La respuesta de Luca es demasiado complicada para mí, así que creé mi propia versión corta que espero ayude a alguien (tal vez incluso a mí del 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 );
    } );

Probado en Chrome, Mozilla e incluso IE.