{"id":2151,"date":"2011-12-12T17:40:43","date_gmt":"2011-12-12T23:40:43","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/?p=2151"},"modified":"2012-01-08T10:25:11","modified_gmt":"2012-01-08T16:25:11","slug":"unmask-password-plugin","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2011\/12\/12\/unmask-password-plugin\/","title":{"rendered":"Unmask Password Plugin"},"content":{"rendered":"<p>I hate password masking&mdash;hiding what I'm typing to prevent someone from looking over my shoulder at my passwords. I know when I'm in public and when I'm alone in the house, and it should be my choice to actually see what I'm typing, since it has to have <a href=\"http:\/\/xkcd.com\/936\/\">some nonsense combination of characters<\/a>. Even <a href=\"http:\/\/www.useit.com\/alertbox\/passwords.html\">Jakob Nielsen agrees with me<\/a>.<\/p>\r\n<p>The logical thing to do is to have a <a href=\"http:\/\/lea.verou.me\/2009\/06\/on-password-masking-and-usability\/\">checkbox that would show the characters<\/a>, and the easiest way to do that is to change the <code>type<\/code> of the <code>input<\/code> element from <code>password<\/code> to <code>text<\/code>.<\/p>\r\n<p>For most browsers, this is <a href=\"http:\/\/stackoverflow.com\/questions\/540851\/jquery-change-element-type-from-hidden-to-input#answer-3057767\">nontrivial but doable<\/a>. You have to <code><a href=\"http:\/\/api.jquery.com\/detach\/\">detach<\/a><\/code> the element first in order to change its <code>type<\/code>. But in Internet Explorer, there's no way to change it. One solution is to create a new <code>input<\/code> element with <code>type<\/code> <code>text<\/code> and copy all the other attributes into it, but that seems like overkill. All we need is a way for the user to see what he is typing, so a tooltip-like overlay would work.<\/p>\r\n<p>This is what I came up with (note that it requires <a href=\"http:\/\/jqueryui.com\/demos\/position\/\">jQuery UI <code>position<\/code><\/a>:<\/p>\r\n<pre><code class=\"demo language-html\">&lt;input type=&quot;password&quot; id=&quot;password&quot;\/&gt;\r\n&lt;label&gt;&lt;input type=&quot;checkbox&quot; id=&quot;check&quot;\/&gt; Show characters as I type&lt;\/label&gt;<\/code><\/pre>\r\n<pre><code class=\"demo language-javascript\">try{\r\n  $('&lt;input type=&quot;password&quot;&gt;').detach().attr('type', 'text');\r\n  $.fn.showPassword = function(shouldShow){\r\n    var type =  shouldShow ? 'text' : 'password';\r\n    return this.each(function(){\r\n      \/* from http:\/\/stackoverflow.com\/questions\/540851\/jquery-change-element-type-from-hidden-to-input *\/\r\n      marker = $('&lt;span \/&gt;').insertBefore(this);\r\n      $(this).detach().attr('type', type).insertAfter(marker);\r\n      marker.remove(); \r\n    });\r\n  };\r\n}catch(e){\r\n  $.fn.showPassword = function(shouldShow){\r\n    return this.each(function(){\r\n      if (shouldShow){\r\n        var span = $(this).siblings('.showPassword');\r\n        if (span.length &gt; 0){\r\n          span.show();\r\n        }else{\r\n          span = $('&lt;span&gt;').addClass('showPassword').css({\r\n            opacity: 0.9,\r\n            background: 'white',\r\n            position: 'absolute',\r\n            fontFamily: 'sans-serif',\r\n            paddingLeft: '2px'\r\n          }).position({\r\n            at: 'left bottom',\r\n            of: this,\r\n            my: 'left top'\r\n          }).text(this.value).insertBefore(this);\r\n          $(this).keyup(function(){ span.text(this.value); });\r\n        }\r\n      }else{\r\n        $(this).siblings('.showPassword').hide();\r\n      }\r\n    });\r\n  };\r\n}\r\n$('#check').change(function(){\r\n  $('#password').showPassword($(this).is(':checked'));\r\n});<\/code><\/pre>\r\n<p>Try this in Internet Explorer as well as a standards browser. The details are different, but the functionality is the same.<\/p>","protected":false},"excerpt":{"rendered":"I hate password masking&mdash;hiding what I'm typing to prevent someone from looking over my shoulder at my passwords. I know when I'm in public and when I'm alone in the house, and it should be my choice to actually see what I'm typing, since it has to have some nonsense combination of characters. Even Jakob [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2151"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=2151"}],"version-history":[{"count":30,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2151\/revisions"}],"predecessor-version":[{"id":2195,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/2151\/revisions\/2195"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=2151"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=2151"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=2151"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}