web-dev-qa-db-fra.com

Détection de la saisie semi-automatique à la saisie de formulaire avec jQuery

J'ai un formulaire qui détecte si tous les champs de texte sont valides sur chaque keyup () et focus (); si elles sont toutes valides, le bouton d'envoi que l'utilisateur pourra cliquer sera activé. Toutefois, si l'utilisateur renseigne l'une des entrées de texte avec une fonctionnalité de saisie semi-automatique du navigateur, le bouton d'envoi n'est pas activé.

Existe-t-il un moyen de détecter si une entrée a été modifiée, quelle que soit la façon dont elle a été modifiée, à l'aide de jQuery?

javascriptjqueryformsautocompletedetect
30
Ryan

L'événement de changement jQuery ne se déclenche qu'en flou. L'événement keyup se déclenchera au fur et à mesure que vous tapez. Aucun des deux ne se déclenche en cliquant sur une option d'auto-complétion. Je cherche aussi un moyen de détecter cela, mais je vais actuellement avec

$(selector).bind("change keyup",function(){
    //Do something, probably with $(this).val()
});

Mais cela ne résout pas vraiment le problème ...

15
Spycho

Vous pouvez essayer d'utiliser on input pour détecter les modifications textuelles (à l'exception de clés telles que ctrl et shift) dans <input> '.

Par exemple:

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

Moi j'ai utilisé

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

qui a fait le tour dans Chrome. input est ce qui l’a fait fonctionner pour la saisie semi-automatique.

12
avoliva

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 dans JSFiddle .

2
Justin

J'ai une solution décente après avoir le même problème. Définissez keyup comme d'habitude sur nos champs de formulaire, puis passez la souris sur la div environnante. Donc, une fois que vous avez cliqué sur l'option de saisie semi-automatique, votre souris sera au-dessus de la div:

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

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

Vous pouvez utiliser la fonction jQuery .change() .

Après le chargement initial de la page, vous pouvez valider l’ensemble du formulaire, juste pour vérifier qu’il n’est pas bien rempli. Après cela, vous pouvez utiliser .change() pour vérifier si des modifications ont été apportées au formulaire et si des modifications ont été apportées. , validez à 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 cliquer sur le bouton d'envoi, mais à l'aide de .submit() pour le lier au validateur de formulaire. Ensuite, si le formulaire IS est valide, continuez. Si le formulaire IS NON valide, utilisez .preventDefault() pour arrêter la soumission du formulaire ..... et affichez également un message d'avertissement indiquant les champs manquants.

0
Peter Ajtai

La réponse a été donnée dans this question. Il n'utilise pas jQuery, mais fonctionne pour la saisie semi-automatique:

Utilisez js onpropertychange event.

0
Yehuda Shapira

Je voulais une très bonne expérience utilisateur sur un domaine où cela ne serait pas invalide (virer au rouge dans mon cas) tant que l'utilisateur était raisonnablement actif, par exemple. toujours remplir le champ.

Pour ce faire pour une entrée normale, j'ai pu connecter keyup avec une fonction debounce, alors que blur est connecté pour une validation immédiate. Bien qu'il semble que keyup soit déclenché par lastpass, ma validation a été retardée, mais la validation a été retardée. Grâce à @ peter-ajtai, j’ai essayé d’ajouter l’événement change. Il attrape bien la dernière passe et laisse les autres subtilités de côté.

Exemple de Coffeescript:

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

Cela a bien fonctionné et le dernier remplissage du formulaire déclenche une validation immédiate.

0
kross