Home » Tools | Code | Headline

How do Facebook put text in their password fields

13. November 2009 by thebeebs 3 Comments

If you’ve logged into Facebook recently you may or may not have noticed that the password field says Password and the email field says Email, which is nice because it means you don’t need to waste space with labels next to your textboxes. I’ve replicated the feature here, and you can download the source here.

 

However password boxes don’t show text, when you type into them they hash the text to protect you from prying eyes… so how do Facebook do it?

 

facebook login

 

Well they do it with a little CSS and a little JavaScript, but sadly it’s not a simple effect to achieve you can’t just change the input type of the text box on focus, like you might imagine. To get a closer look It’s best if we switch CSS off in the browser and visit facebook, what you’ll see it this:

 

facelogin

 

You’ll notice we have three boxes, now the new middle box is a password input box that is hidden using CSS, If you enter text into it then it’ll be hashed:

 

facebookloginhashed

If you click on the third text box it disappears and your focus is sent to the second textbox.

facebooktwoboxes

So to recap we have to write the following features:

 

Feature: Password should be displayed then got rid of
Given the password reads “Password”

and the user clicks password

then the “Password” text should be cleared

 

Feature: Password should be displayed the got rid of when the user tabs

Given the password reads “Password”

and the user is in the Email textbox

and the user hits tab

then the “Password” text should be cleared

 

Feature: User types a password
Given a user clicks on the password

and starts typing
when the the password is displayed
Then it should be hashed

 

Feature: User pastes a password
Given a user clicks on the password
and pastes the password
when the the password is displayed
Then it should be hashed

 

Feature: User tabs then types a password
Given a user has typed their email
and hits tab
and starts typing
when the the password is displayed
Then it should be hashed

 

Feature: User tabs then pastes a password
Given a user has typed their email
and hits tab
and pastes a password
when the the password is displayed
Then it should be hashed

 

I managed to replicate the feature and have put the source below, tomorrow I’ll walk through the code and explain how it was achieved.

 

You can view a demo here: http://www.thewayithink.co.uk/code/prettypassword/prettypassword.html

 

And can download the source here: http://www.thewayithink.co.uk/code/prettypassword/jquery.prettypassword.zip

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag

biuquote
  • Comment
  • Preview
Loading