{"id":3043,"date":"2009-07-09T05:48:22","date_gmt":"2009-07-09T12:48:22","guid":{"rendered":"http:\/\/css-tricks.com\/?p=3043"},"modified":"2009-07-09T05:48:22","modified_gmt":"2009-07-09T12:48:22","slug":"better-password-inputs-iphone-style","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/better-password-inputs-iphone-style\/","title":{"rendered":"Better Password Inputs, iPhone Style"},"content":{"rendered":"<p>Recently renowned usability expert Jakob Nielsen wrote an article <a href=\"http:\/\/www.useit.com\/alertbox\/passwords.html\" rel=\"noopener\">Stop Password Masking<\/a> in which he claims that hiding users passwords as they input them is bad practice. What he is referring to is the default browser behavior of &lt;input type=password &#8230; \/&gt; elements, where text entered into them turns into bullets rather than showing the real characters typed. He says it reduces user confidence in what they type and thus beginning a string of problems like more typing errors, users choosing overly-simple passwords or copying and pasting complex ones (less secure). The effect is ultimately less user satisfaction and ponentially less profit for you. <\/p>\n<p>Of course he is right about all that, but masking passwords isn&#8217;t something that was developed and made default just for shits and giggles. It is to keep prying eyes away from looking at your screen and learning your passwords. This fact isn&#8217;t lost on Jakob who suggests making it a checkbox-style option.<\/p>\n<p>Admittedly, someone peeking at your screen to capture a password is pretty rare. I&#8217;m alone in my office right now, like I am most of the time, and I bet that plant in the corner doesn&#8217;t have any secret cameras in it. I&#8217;m sure a lot of you are in similar environments.  But I&#8217;m of the opinion that leaving important security up to users is typically not a good choice. <a href=\"http:\/\/daringfireball.net\/linked\/2009\/06\/29\/nielsen-passwords\" rel=\"noopener\">Gruber linked to<\/a> Jakob&#8217;s article, noting that the iPhone has an interesting solution to this already in use. <\/p>\n<p><!--more--><\/p>\n<h3>How the iPhone handles password inputs<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/iphone-password-2.jpg?resize=262%2C204\" width=\"262\" height=\"204\" alt=\"\" title=\"\" data-recalc-dims=\"1\" \/><\/p>\n<ul>\n<li>The iPhone inputs turns text into bullet points like web password inputs, but after a quick delay, allowing you to see the typed character for a brief time. <\/li>\n<li>The iPhone keyboard has a popup as you press each character verifying visually what character you just typed.<\/li>\n<\/ul>\n<p>This is a pretty damn nice way to handle password inputs, which can be translated into use on the web. This handling of password inputs  is a combination between giving better user feedback on key presses, increasing user confidence, yet still mostly hiding the password making it more difficult for casual onlookers.<\/p>\n<p>We can replicate the idea behind both of these things, using jQuery!<\/p>\n<h3>Displaying pressed keys<\/h3>\n<p>Here is some super simple form markup with a password input:<\/p>\n<pre><code class=\"html\">&lt;form action=\"#\" id=\"login-form-1\"&gt;\r\n  &lt;div&gt;\r\n      &lt;label for=\"user-password\"&gt;Password&lt;\/label&gt;\r\n      &lt;input type=\"password\" id=\"user-password\" name=\"user-password\" \/&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/form&gt;<\/code><\/pre>\n<p>We&#8217;ll use that internal div to set some relative positioning, and then set up some styling for a special div that we will insert on-the-fly in there for displaying the pressed key.<\/p>\n<pre><code class=\"css\">#login-form-1 div { \r\n   position: relative;\r\n}\r\n#login-form-1 div #letterViewer { \r\n   display: none; \r\n   position: absolute; \r\n   left: 240px; \r\n   top: -30px; \r\n   width: 100px; \r\n   font: bold 72px Helvetica, Sans-Serif; \r\n}<\/code><\/pre>\n<p>Then with jQuery, we can append that div and attach a keypress event to the input. When a key is pressed, that div will fade in with the letter, and fade back out. This will simulate the iPhones keyboard pressing letter verification.<\/p>\n<pre><code class=\"javascript\">$(function() {\r\n    $(\"#login-form-1 div\").append(\"&lt;div id='letterViewer'&gt;\");\r\n    $(\"#user-password\").keypress(function(e) {\r\n        $(\"#letterViewer\")\r\n            .html(String.fromCharCode(e.which))\r\n            .fadeIn(200, function() {\r\n                $(this).fadeOut(200);\r\n            });        \r\n    });\r\n});<\/code><\/pre>\n<p>Of course, you could style this up any way you want.<\/p>\n<h3>Changing text to bullets \/ only displaying last character<\/h3>\n<p>The next theory is making the text into bullets as you type them, but only after a short delay allowing you to see the typed character briefly. This is a bit more difficult. You could change the password input to be of type=&#8221;text&#8221;, but then changing the value to bullets would be problematic because of course you need to submit the real value of the field not bullets. You can&#8217;t leave the input as type=&#8221;password&#8221;, because nothing can be shown in those inputs except bullets.<\/p>\n<p>The solution is to <strong>duplicate<\/strong> the password field, change it to a text input, and hide the original. This way you can use the new field and manipulate it however you want, but ultimately you submit the now-hidden password input which you keep up to date with current typed data.<\/p>\n<p>We could set into writing this, but fortunately the DECAF<sup>o<\/sup> blog has already done the heavy lifting and <a href=\"http:\/\/blog.decaf.de\/2009\/07\/iphone-like-password-fields-using-jquery\/\" rel=\"noopener\">created a jQuery plugin<\/a> to do just this.<\/p>\n<p>Simply target your password input and invoke the plugin:<\/p>\n<pre><code class=\"javascript\">$('#user-password-2').dPassword();<\/code><\/pre>\n<p>Of course like any good plugin, there is a bunch of options you can pass as parameters like the delay before switching, the prefix for the duplicated input, and more.<\/p>\n<p>&nbsp;<\/p>\n<p><a class=\"button\" href=\"https:\/\/css-tricks.com\/examples\/iPhonePassword\/\">View Demo<\/a> &nbsp; <a class=\"button\" href=\"https:\/\/css-tricks.com\/examples\/iPhonePassword.zip\">Download Files<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>What do you guys think? Is this a good middle ground or the worst of both worlds?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently renowned usability expert Jakob Nielsen wrote an article Stop Password Masking in which he claims that hiding users passwords as they input them is bad practice. What he is referring to is the default browser behavior of &lt;input type=password &#8230; \/&gt; elements, where text entered into them turns into bullets rather than showing the [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3043"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=3043"}],"version-history":[{"count":12,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3043\/revisions"}],"predecessor-version":[{"id":3055,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/3043\/revisions\/3055"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=3043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=3043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=3043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}