web-dev-qa-db-fra.com

Un événement déclenché lors de la saisie semi-automatique?

J'ai une forme assez simple. Lorsque l'utilisateur tape dans un champ de saisie, je souhaite mettre à jour ce qu'il a tapé ailleurs sur la page. Tout fonctionne bien. J'ai lié la mise à jour aux événements keyup, change et click.

Le seul problème est que si vous sélectionnez une entrée dans la zone de saisie semi-automatique du navigateur, elle ne se met pas à jour. Y a-t-il un événement qui se déclenche lorsque vous sélectionnez la saisie semi-automatique (ce n'est apparemment ni change ni click). Notez que si vous sélectionnez dans la zone de saisie semi-automatique et le flou le champ de saisie, la mise à jour sera déclenchée. Je voudrais qu'il soit déclenché dès la saisie semi-automatique.

Voir: http://jsfiddle.net/pYKKp/ (j'espère que vous avez rempli beaucoup de formulaires dans le passé avec une entrée nommée "email").

HTML:

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

CSS:

div { 
    float: right; 
}

Scénario:

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

Je recommande d'utiliser monitorEvents. C'est une fonction fournie par la console javascript à la fois inspecteur web et firebug qui affiche tous les événements générés par un élément. Voici un exemple d'utilisation que vous en feriez:

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

Dans votre cas, Firefox et Opera génèrent un événement input lorsque l'utilisateur sélectionne un élément dans la liste déroulante de saisie semi-automatique. Dans IE7-8, un change événement est produit après que l'utilisateur change de focus. Le dernier Chrome génère un événement similaire.

Un tableau de compatibilité du navigateur détaillé peut être trouvé ici:
https://developer.mozilla.org/en-US/docs/Web/Events/input

68
Xavi

Voici une solution géniale.

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

J'ai testé avec Chrome et Firefox et cela fonctionnera également pour d'autres navigateurs.

J'ai essayé de nombreux événements avec de nombreux éléments, mais seulement cela est déclenché lorsque vous sélectionnez la saisie semi-automatique.

J'espère que cela fera gagner du temps à quelqu'un.

17
Anand Singh

Ajoutez "flou". fonctionne dans tous les navigateurs!

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

Détection de la saisie semi-automatique sur la saisie de formulaire avec jQuery OR JAVASCRIPT

en utilisant: événement entrée. Pour sélectionner (entrée ou zone de texte) des suggestions de valeur

PAR EXEMPLE POUR JQUERY:

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

});

PAR EXEMPLE POUR JAVASCRIPT:

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

Cette requête ajax de démarrage ...

2
Franklin CI

Comme Xavi expliqué, il n'y a pas de solution 100% cross-browser pour cela, j'ai donc créé moi-même une astuce pour cela (5 étapes à suivre):
1. J'ai besoin de quelques nouveaux tableaux:

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


2. sur le focus sur le texte d'entrée que je veux déclencher (dans votre cas "email", dans mon exemple "nom") J'ai défini un intervalle, par exemple en utilisant jQuery (réflexion inutile):

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


3. sur flou je retire l'intervalle: (toujours en utilisant jQuery pas besoin de réflexion), et je vérifie si la valeur a changé

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. Maintenant, la fonction principale qui vérifie les changements est la suivante

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

Remarque importante: vous pouvez utiliser "ceci" dans la fonction ci-dessus, en vous référant à votre élément HTML d'entrée déclenché. Un identifiant doit être spécifié pour que cette fonction fonctionne, et vous pouvez passer une fonction, ou un nom de fonction ou une chaîne de commande comme rappel.


5. Enfin, vous pouvez faire quelque chose lorsque la valeur d'entrée est modifiée, même lorsqu'une valeur est sélectionnée dans une liste déroulante de saisie semi-automatique

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

Remarque importante: vous utilisez à nouveau "ceci" dans la fonction ci-dessus en référence à l'élément HTML d'entrée déclenché.

FIDDLE DE TRAVAIL !!!
Je sais que cela semble compliqué, mais ce n'est pas le cas.
J'ai préparé un violon de travail pour vous, l'entrée à modifier est nommée "nom" donc si vous avez déjà entré votre nom dans un formulaire en ligne, vous pourriez avoir une liste déroulante de votre navigateur pour tester.

2
Luca Borrione

Le seul moyen sûr est d'utiliser un intervalle.

La réponse de Luca est trop compliquée pour moi, alors j'ai créé ma propre version courte qui, espérons-le, aidera quelqu'un (peut-être même moi du futur):

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

Testé sur Chrome, Mozilla et même IE.

1
Sorin C

J'ai réalisé via monitorEvents qu'au moins dans Chrome l'événement keyup est déclenché avant la saisie semi-automatique input événement. Sur une entrée clavier normale, la séquence est keydowninputkeyup, donc après l'entrée.

Ce que j'ai fait c'est alors:

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

Doit être vérifié avec un autre navigateur, mais cela pourrait être un moyen sans intervalles.

1
Björn Grambow

Je ne pense pas que vous ayez besoin d'un événement pour cela: cela ne se produit qu'une seule fois, et il n'y a pas de bonne prise en charge à l'échelle du navigateur, comme le montre la réponse de @xavi.

Ajoutez simplement une fonction après avoir chargé le corps qui vérifie une fois les champs pour tout changement dans la valeur par défaut, ou s'il s'agit simplement de copier une certaine valeur à un autre endroit, copiez-la simplement pour vous assurer qu'elle est correctement initialisée.

0
Nanne