comment facebook onkeyup et onchange au changement de mot de passe?

Question

J'ai remarqué que dans le facebook changer les mots de passe, ils ont cette belle alerte en bas vous indiquant que les mots de passe ne correspondent pas ou si le mot de passe de confirmation est trop court. Cependant, lorsque j'utilise le firebug, je ne vois pas d'onkeyup ou de onchange.

Et ils l'ont fait très bien, peu importe si je tape ou si je copie une chaîne et coller, il va déclencher la validation (je soupçonne javascript).

Comment font-ils? Plus important encore, je veux copier la façon dont ils le font.

Voici le firebug que j'ai vu au html. La chose étrange est la span class = "short_pass" apparaît seulement quand il est déclenché. Comment font-ils? et notez qu'ils n'ont pas de propriétés onkeyup ou onchange.

Answer 1

Il est recommandé de s'abonner à des événements tels que onkeyup et onkeychange à partir de JavaScript et de ne pas intégrer les écouteurs d'événement en tant qu'attributs dans les éléments eux-mêmes. Cela donne une bonne séparation de la logique et du contenu. Facebook a probablement un code JavaScript externe (ou interne) qui s'abonne aux événements onkeyup, onkeypress et onblur de ses champs de saisie. Si vous voulez apprendre comment cela fonctionne, je vous suggère de lire QuirksMode.org Introduction to Events, et Advanced Event Registration Models. En raison des différences entre le modèle d'IE et la norme, il est préférable d'utiliser une bibliothèque JavaScript pour faire ce travail pour vous.

Quelques exemples sont jQuery, YUI, Prototype et Dojo (et il y a plus que je ne peux pas penser au moment). Je vous suggère de choisir un cadre et de vous familiariser avec celui-ci. Cela rendra le développement JavaScript beaucoup plus facile.

Voici un exemple de code de travail dans jQuery que vous pouvez utiliser pour démarrer et exécuter très rapidement. Un exemple de travail complet peut être trouvé ici: http://jsbin.com/obama. Si vous voulez que cela soit fait "correctement", vous devez utiliser un cadre de validation qui gère la logique pour vous. Voici un example of a working jQuery validation framework, et voici the plugin it was written in.

(function() { 
$(document).ready(function() { 

    $("#password").blur(function() { 

    }); 

    function validatePasswordsMatch() { 
     var $pwd = $("#password"); 
     var $confirm = $("#confirmPassword"); 
     if ($pwd.val().length > 0 && $confirm.val().length > 0 && $pwd.val() != $confirm.val()) { 
      $("#match").text("Passwords do not match."); 
      $confirm.keyup(validatePasswordsMatch); 
      $pwd.keyup(validatePasswordsMatch); 
      console.log('alert bad'); 
     } else { 
      $("#match").text(""); 
      console.log('alert'); 
      $confirm.unbind('keyup', validatePasswordsMatch); 
      $pwd.unbind('keyup', validatePasswordsMatch); 
     } 
    } 

    function validatePasswordLength() { 
     var $pwd = $("#password"); 
     if ($pwd.val().length < 6) { 
      $("#lengthMsg").text("Password does not meet length requirement."); 
      // Bind to keypress so the validator re-validates as the user types when the text box gains focus. 
      $pwd.keypress(validatePasswordLength); 
     } else { 
      $("#lengthMsg").text(""); 
      $pwd.unbind('keypress', validatePasswordLength); 
     } 
    } 

    $("#password").blur(validatePasswordLength).blur(validatePasswordsMatch); 
    $("#confirmPassword").blur(validatePasswordsMatch); 

}); 
})();