résumé:
Il y a maintenant une exigence comme indiqué sur la figure. Lorsque l'utilisateur vérifie la case Afficher le texte en clair, il doit afficher le mot de passe entré par l'utilisateur en texte clair. Lorsque le chèque est supprimé, il ou elle doit revenir au texte chiffré. Au début, il ou elle devrait modifier le type de boîte d'entrée pour décider s'il faut afficher le texte en clair ou le texte chiffré. Il ou elle utilise l'attache de JQuery pour faire l'expérience. Les résultats des tests sont Chrome, Firefox et IE9 +, et une erreur sera signalée ci-dessous IE8. J'ai trouvé la raison. Il n'est pas autorisé à modifier l'attribut type de l'entrée dans IE8, et enfin j'ai une idée différente pour l'implémenter.
Lorsque l'affichage est coché, la zone d'entrée est remplacée par Type = "texte". Lorsque la zone d'entrée n'est pas cochée, le code est le suivant:
<! Doctype html> <html> <éadf> <tdical> </ title> <méta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <script src = "jQuery.min.js"> </cript> </ad> <pody> <pan id = "Pass"> <fant name = "mot de passe" " type = "mot de passe"> </span> <label> <entrée type = "checkbox" id = "show-password"> show PlainText </brold> <cript> $ ('# show-password'). Cliquez sur (fonction () {var inp, cname, val; if (this.checked) {inp = $ ('# pass'). inp.val (); $ ('# pass'). html ('<input name = "' + cname + '" value = "' + val + '" type = "text">');} else {inp = $ ('# pass'). enfants ('entrée'); cname = inp.attr ('name'); val = inp.val (); $ ('#). name = "'+ cname +'" value = "'+ val +'" "type =" mot de passe "> ');}}); </ script> </ body> </html>Résumer:
Cet article n'a aucun contenu technique, mais ce type d'interaction existe toujours. Je considère principalement les problèmes de compatibilité ci-dessous IE8. Si vous avez ce type d'interaction dans votre projet, vous pouvez vous y référer, ou si vous avez une meilleure façon de le partager avec moi.