{"id":3228,"date":"2012-12-03T08:46:37","date_gmt":"2012-12-03T07:46:37","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3228"},"modified":"2017-01-19T16:05:49","modified_gmt":"2017-01-19T15:05:49","slug":"creer-systeme-masquage-demasquage-champ-mot-de-passe-formulaire","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/creer-systeme-masquage-demasquage-champ-mot-de-passe-formulaire","title":{"rendered":"Cr\u00e9er un syst\u00e8me de masquage\/d\u00e9masquage d’un champ mot de passe"},"content":{"rendered":"

L’utilisateur tape son mot-de-passe, et \u00e0 la fin il doute de ce qu’il a entr\u00e9 sur l’avant dernier caract\u00e8re. Du coup il retape tout. Et si on lui proposait de d\u00e9masquer temporairement son mot de passe sur commande\u00a0?<\/p>\n

Je vois souvent des sites connus proposer des formulaires d’identifications ou des formulaires d’inscription avec un champ \u00ab\u00a0mot de passe\u00a0\u00bb utilisant un type texte. L’effet est assez direct pour moi, on voit mon mot de passe, donc j’envoie un mail \u00e0 l’\u00e9quipe qui g\u00e8re le site pour les pr\u00e9venir de l’erreur.<\/p>\n

\u00ab\u00a0Bonjour Monsieur, ceci n’est pas une erreur et permet \u00e0 l’internaute de voir ce qu’il a tap\u00e9 dans le champ.\u00a0\u00bb<\/q><\/p>\n

Ah ouais carr\u00e9ment\u00a0! Ils ont r\u00e9fl\u00e9chi en plus, avant de faire cette erreur\u00a0?
\nBref, sarcasmes mis \u00e0 part, la personne qui regardera au dessus de votre \u00e9paule pendant que vous tapez deux fois votre mot de passe en clair, aura bien le temps de le lire une fois \ud83d\ude09<\/p>\n

Concept<\/h2>\n

Windows 8 propose une gestion du champ mot-de-passe assez int\u00e9ressante puisqu’il permet de masquer et d\u00e9masquer le code \u00e0 tout moment avec un bouton plac\u00e9 \u00e0 droite du champ.
\nVoil\u00e0 \u00e0 quoi ressemble un tel champ :<\/p>\n

\"Champ<\/p>\n

C’est ce comportement que j’ai cherch\u00e9 \u00e0 reproduire r\u00e9cemment.<\/p>\n

Le code<\/h2>\n

HTML : la structure<\/h3>\n

Voici un petit morceau de code classique pour la structure HTML :<\/p>\n

<div class=\"connect_box\">\r\n   <h1>Connection<span>use your login and password<\/span><\/h1>\r\n   <form>\r\n      <p>\r\n         <label for=\"password\">Your password<\/label>\r\n         <input type=\"password\" value=\"\" placeholder=\"Enter Password\" id=\"password\">\r\n         <button class=\"unmask\" type=\"button\" title=\"Mask\/Unmask password to check content\">Unmask<\/button>\r\n      <\/p>\r\n   <\/form>\r\n<\/div><\/code><\/pre>\n
Je ne pense pas que vous ayez besoin d’explications, mais si c’\u00e9tait le cas laissez-moi un petit commentaire en fin d’article.
\nLe bouton est pr\u00e9sent uniquement pour intercepter l’action de masquage et d\u00e9masquage, mais vous allez comprendre par vous-m\u00eame. Je n’ai pas mis de bouton submit pour all\u00e9ger le code \ud83d\ude42<\/p>\n
CSS : les styles<\/h3>\n
Un peu de mise en forme avec CSS, rien de sorcier \u00e9galement, nous verrons le design du bouton de d\u00e9masquage plus tard\u00a0:<\/p>\n
div {\r\n  width: 400px;\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\nh1 {\r\n  font-size: 30px;\r\n  color: #969696;\r\n  text-shadow: 1px 1px 0px #fff;\r\n  font-weight: 100;\r\n}\r\n h1 span {\r\n  display:block;\r\n  font-size: 14px;\r\n  color: #bbb;\r\n }\r\nform p { position: relative; }\r\nlabel { \r\n  position:absolute;\r\n  left:-9999px;\r\n  text-indent: -9999px;\r\n}\r\ninput {\r\n  width: 250px;\r\n  padding: 10px 12px;\r\n  margin-bottom: 5px;\r\n  border: 1px solid #cccccc;\r\n  border-bottom-color: #fff;\r\n  border-right-color: #fff;\r\n  border-radius: 4px;\r\n  background: #e3e3e3;\r\n  color: #888;\r\n}<\/code><\/pre>\n
Voici la partie concernant le petit bouton. J’ai souhait\u00e9 faire quelque chose en full CSS sans image, mais \u00e0 vous d’adapter la chose.<\/p>\n
\r\n.password + .unmask {\r\n  position:absolute;\r\n  right: 68px; top: 7px;\r\n  width: 25px;\r\n  height: 25px;\r\n  text-indent: -9999px;\r\n  background: #aaa;\r\n  border-radius: 50%;\r\n}\r\n.password + .unmask:before {\r\n  content: \"\";\r\n  position:absolute;\r\n  top:4px; left:4px;\r\n  z-index:1;\r\n  width: 17px;\r\n  height: 17px;\r\n  background: #e3e3e3;\r\n  border-radius: 50%;\r\n}\r\n.password[type=\"text\"] + .unmask:after {\r\n  content: \"\";\r\n  position:absolute;\r\n  top:6px; left:6px\r\n  z-index:2;\r\n  width: 13px;\r\n  height: 13px;\r\n  background: #aaa;\r\n  border-radius: 50%;\r\n}<\/code><\/pre>\n
On donne une forme ronde \u00e0 notre bouton, puis on lui change l\u00e9g\u00e8rement son aspect lorsque le champ password<\/code> devient un champ de type text<\/code>. Pour effectuer le passage de l’un \u00e0 l’autre, on va utiliser JavaScript.<\/p>\n
\"\"<\/p>\n
JavaScript : les actions<\/h3>\n
L\u00e0 o\u00f9 \u00e7a fait vraiment mal, c’est la fonction JavaScript.
\nJe pensais utiliser simplement jQuery pour changer la valeur de l’attribut type et la faire passer de password \u00e0 text.
\nC’est un peu la base de la technique, et sur le principe c’est hyper simple.<\/p>\n
Sauf que \u00e7a ne se passe pas comme \u00e7a\u00a0: l’acc\u00e8s \u00e0 l’attribut type est \u00ab\u00a0interdit\u00a0\u00bb.
\nIl va falloir en quelque sorte r\u00e9cup\u00e9rer l’\u00e9l\u00e9ment, chacun de ses attributs et ses valeurs, puis recr\u00e9er un nouvel \u00e9l\u00e9ment compos\u00e9 des m\u00eames attributs (on en profitera pour changer la valeur du type \ud83d\ude09 ) pour l’ins\u00e9rer dans le DOM.<\/p>\n
Je vais donc vous donner la partie facile du code, celle qui consiste \u00e0 dire \u00e0 l’\u00e9l\u00e9ment \u00ab\u00a0change de type quand on clique l\u00e0-dessus\u00a0\u00bb. Je vous donne la fonction plus complexe juste apr\u00e8s.<\/p>\n
$('.unmask').on('click', function(){\r\n  \r\n  if($(this).prev('input').attr('type') == 'password')\r\n    changeType($(this).prev('input'), 'text');\r\n  \r\n  else\r\n    changeType($(this).prev('input'), 'password');\r\n  \r\n  return false;\r\n});<\/code><\/pre>\n
Le code fait la chose suivante\u00a0: au clic, si l’input<\/code> pr\u00e9c\u00e9dent le bouton est de type password<\/code>, alors il passe en type text<\/code>\u00a0; s’il est de type text<\/code>, il repasse en password<\/code>.<\/p>\n
La fonction changeType()<\/code> est d\u00e9finie ainsi\u00a0:<\/p>\n
\/* \r\n  function from : https:\/\/gist.github.com\/3559343\r\n  Thank you bminer!\r\n*\/\r\n\/\/ x = \u00e9l\u00e9ment du DOM, type = nouveau type \u00e0 attribuer\r\nfunction changeType(x, type) {\r\n   if(x.prop('type') == type)\r\n      return x; \/\/ \u00e7a serait facile.\r\n   try {\r\n      \/\/ Une s\u00e9curit\u00e9 d'IE emp\u00eache ceci\r\n      return x.prop('type', type);\r\n   } \r\n   catch(e) {\r\n      \/\/ On tente de recr\u00e9er l'\u00e9l\u00e9ment\r\n      \/\/ En cr\u00e9ant d'abord une div\r\n      var html = $(\"<div>\").append(x.clone()).html();\r\n      var regex = \/type=(\\\")?([^\\\"\\s]+)(\\\")?\/;\r\n      \/\/ la regex trouve type=text ou type=\"text\"\r\n      \/\/ si on ne trouve rien, on ajoute le type \u00e0 la fin, sinon on le remplace\r\n      var tmp = $(html.match(regex) == null ?\r\n         html.replace(\">\", ' type=\"' + type + '\">') :\r\n         html.replace(regex, 'type=\"' + type + '\"') );\r\n\r\n      \/\/ on rajoute les vieilles donn\u00e9es de l'\u00e9l\u00e9ment\r\n      tmp.data('type', x.data('type') );\r\n      var events = x.data('events');\r\n      var cb = function(events) {\r\n         return function() {\r\n            \/\/Bind all prior events\r\n            for(i in events) {\r\n               var y = events[i];\r\n               for(j in y) tmp.bind(i, y[j].handler);\r\n            }\r\n         }\r\n      }(events);\r\n      x.replaceWith(tmp);\r\n      setTimeout(cb, 10); \/\/ On attend un peu avant d'appeler la fonction\r\n      return tmp;\r\n   }\r\n}<\/code><\/pre>\n
Limites<\/h2>\n
Mon exemple utilise CSS3. Pour une meilleure prise en charge de l’aspect du bouton, utilisez le principe de d\u00e9gradation gracieuse en pr\u00e9voyant une image pour les vieux navigateurs, par exemple.<\/p>\n
IE7 et 8 ne reconnaissant pas la validit\u00e9 de la premi\u00e8re partie du code JS (la partie \u00ab\u00a0try\u00a0\u00bb), le reste du code permet le changement de type, mais l’information entr\u00e9e dans le champ de type password<\/code> est ind\u00e9pendante de l’information entr\u00e9e dans le champ une fois pass\u00e9 en type text<\/code>.<\/p>\n
Pour ceux qui veulent forker le code\u00a0:
\nLe code sur CodePen.io<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
L’utilisateur tape son mot-de-passe, et \u00e0 la fin il doute de ce qu’il a entr\u00e9 sur l’avant dernier caract\u00e8re. Du coup il retape tout. Et si on lui proposait de d\u00e9masquer temporairement son mot de passe sur commande\u00a0?<\/p>\n","protected":false},"author":4,"featured_media":3257,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[610,50,9],"tags":[416,490,52,537,538],"coauthors":[597],"class_list":["post-3228","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-ressources-telechargements","category-tutoriels","tag-attribut","tag-input","tag-jquery","tag-password","tag-type"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3228","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=3228"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3228\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3257"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3228"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}