Détection de l'autocomplet lors de l'entrée de formulaires avec jQuery

vous pouvez essayer d'utiliser on input pour détecter les modifications textuelles (sauf les touches comme ctrl et shift ) dans <input> 's.

par exemple:

$(input).on('input', function() { 
    console.log($(this).val()); 
});

moi - même j'ai utilisé

$(selector).on("change keyup blur input", function() {});

qui a fait l'affaire en Chrome. input est ce qui l'a fait fonctionner pour autocomplete.

mon problème était de détecter le remplissage automatique (via un plugin comme lastpass ou 1password) ainsi que le problème décrit ci-dessus.

la solution qui a fonctionné pour moi était:

$(function(){    
    function validate(){
        if($('#email').val() !== '' && $('#password').val() !== '')
            $('#submit').prop('disabled', false);
        else
            $('#submit').prop('disabled', true);
    }

    // Validate after user input
    $('#email, #password').on('keyup change', validate);

    // Validate on mouse enter of body and login form
    // to catch auto-fills from roboform/1password etc...
    $('body, #loginform').on('mouseenter', validate);

    // Validate onload incase of autocomplete/autofill
    validate();
});

Voir la démo en JSFiddle .

j'ai une bonne solution après avoir eu le même problème. Mettez keyup comme normal à nos champs de forme, puis mouseover à la div environnante. Ainsi, une fois que vous cliquez sur l'option autocomplete, votre souris sera sur le dessus de la div:

$("#emailaddress").bind("keyup", function() {
    displayFullSubcribeForm();
});

$(".center_left_box").bind("mouseover", function() {
    displayFullSubcribeForm();
});

vous pouvez utiliser la fonction jQuery .change() .

après le chargement initial de la page, vous pouvez valider le formulaire entier, juste pour vérifier qu'il n'est pas rempli. Après cela, vous pouvez utiliser .change() pour vérifier si les choses ont changé sur le formulaire, et si quelque chose a changé, valider à nouveau le formulaire.

$(document).ready(function() {
   // validate form once, just to be sure (if valid, activate submit button)
});
...
<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<script type="text/javascript">     
    $('.target').change(function() {
        alert('Something changed');
        // Try validating form again (if valid, activate submit button)
    });
</script>

Plan B

une autre option consiste à toujours avoir le bouton Soumettre cliquable, mais utiliser .submit() pour le lier au validateur de formulaire. Ensuite, si le formulaire EST valide, réaliser. Si le formulaire N'est pas valide utiliser .preventDefault() pour arrêter la présentation du formulaire..... et vous afficheriez aussi un message d'avertissement, indiquant les champs manquants.

la réponse a été donnée dans cette question . Il n'utilise pas jQuery, mais il fonctionne pour Autocomplete:

Utiliser js onpropertychange de l'événement.

je voulais une très bonne expérience utilisateur sur un champ où il ne serait pas invalide (rouge dans mon cas) tant que l'utilisateur était raisonnablement actif, par exemple en remplissant encore le champ.

pour faire cela pour une entrée normale, j'ai pu connecter keyup avec une fonction debounce , tandis que blur est connecté pour une validation immédiate. Bien qu'il semble que keyup soit déclenché par lastpass, puisque je l'ai débondé, il y avait un retard dans la validation. Grâce à @peter-ajtai j'ai essayé d'ajouter l'événement change et il attrape en effet la dernière passe et laisse les autres subtilités.

Coffeescript exemple:

@fieldExp .keyup($.debounce(@_onExpChange, 3000)) .blur(@_onExpChange) .change(@_onExpChange)

cela a bien fonctionné et le formulaire lastpass remplit déclenche une validation immédiate.

c'est la solution ultime, garantie de fonctionner

$(document).bind('mouseover', function(){
        liveValidate();
    });