iPhone-Style Passwords Using MooTools PassShark
Every once in a while I come across a plugin that blows me out of the water and the most recent culprit is PassShark: a MooTools plugin that duplicates the iPhone's method of showing/hiding the last character in a password field. This gem of a MooTools plugin, which conquers some problems that plague jQuery counterparts, was authored by valued MooTools contributors Luis Merino and Nathan Querido.
The MooTools PassShark Usage
window.addEvent('load',function() {
new PassShark('pass',{
interval: 300,
duration: 1500,
replacement: '%u25CF',
debug: false
});
});
The only required parameter is the ID of the input/password element you'd like to act as an iPhone password field. Options include:
- interval: Amount of time between new character checks.
- duration: Amount of time to show a given character before obfuscating it.
- replacement: The character to replace the character.
Sometimes the less options the better!
PassShark is yet another perfect showcase of what MooTools allows you to accomplish. Big ups to Luis Merino and Nathan Querido for releasing this gem. To get more specific information about their great plugin, visit their blog post. MooTools FTW!
I really like this, especially as it degrates gracefully if JS isn’t present.
Man, I really like your website.
Mainly because of your fanatic support of mootools, which for me is really helpful, since I intend to learn JS from all its unique authors perspectives.
Thanks for keeping your blog and giving a lot of valuable info for the internet and blogsphere.
It’s a very nice plugin.
But I don’t like it.
The purpose of hiding passwords is not to allow anyone to figure out the password, in an iphone it might be clever because of the movility, but in a personal computer it’s easier that someone might be watching from behind and take note of the characters that appear.
Not useful. If someone has a hard time writing a password in **** characters, keep away from SSH clients…
anyway I love your website!!!
Alex
Yo David! What’s up
It’s a good thought, but I just did an impromptu test with a person sitting next to me, I asked her to watch the password field and see if she could tell what I wrote – and I type at about 90wpm.
She understood it on the first try.
I think password usability can really be improved, and I love to see you thinking about it David, but I can say I would never login to a site that used this in a public place.
The problem is that you are taking something designed for a dynamic touch screen and using it on a keyboard who does not have the issues.
The iphone keyboard dynamically changes the active state of the keyboard keys as you type to help you. But this does not work well when you cant see if it was correct.
Another issue I see is that this uses time alone to decide when to encrypt. It should never show more than one letter unencrypted at once. But it does if you type quickly.
Something the iPhone has going for it is that its such a personal device. People rarely are “looking over your shoulder” while you log into something from your mobile device.
Also, revealing the letters is more to ensure you hit the right softkey, since you have no way of actually feeling it. Phones without a qwerty keyboard do it also, since you have to press a key upto 3-4 times to select the letter you want.
Those points aside, its a neat effect. Should probably change faster for faster typists.
I’d rather suggest using opacity:0 for password inputs over a fake input background image :)
This is a nice proof of concept script, but this method only suitable for portable devices.
Nice plugin for a (in my opinion not very) useful feature.
It’s more like a proof of consept isn’t it?
At least before using it on a website, you should ask or warn the user – otherwise you may have some displeased users…
I agree with Alex from above but this is a very cool script.
Although cool, it kinda beats the purpose. Decent mobile phone browsers already implemented this feature on all type=”password” input fields. This is not really necessary for ‘normal’ keyboard based input. On top of that: javascript is too slow for this: with my typing speed it displays about 5 chars at the same time (running Firefox on the latest Macbook Pro).
Like some people here already said, this makes just sense on mobile devices. Don´t use that for important stuff. I times of HD video cams you never know if your screen isn´t “big in pic” somwhere ;-)
Nice PoC of the iphone password field with Mootools.
I also doubt that it can be used in a live environment for the previously stated reason (someone spying over shoulder, etc.).
Maybe the script could be used for other stuff… like the Login/Username field, keeping the password itself safe.
I tried implementing this on our e-commerce some months back but took it away after the first usability tests. It works for mobile because the screen _is_ the keyboard and the user understands from watching as they type what is happening. For desktop the vast majority of your typical user cannot touch type. So in our usability tests the user looked at the keyboard to enter their password, then looked up at the screen, saw the last character and purposely deleted it not understanding what it was. This resulted in frustrated users unable to login or creating their account with a different password from what they thought they entered.
The version here actually could be improved by never allowing more than 1 character visible at a time… which is how I believe the iPhone works.
Excellent plugin. i liked it…
@Chris Dary: She could have seen your password too if you’d ask her to look in your keyboard while typing. Wether you use this technique or not is up to you, also consider what “type” of website you are gonna use it for. Consider reviewing http://www.useit.com/alertbox/passwords.html.
@Aeron: That is easily solved by decreasing the “refresh” time (Class option ‘interval’), I didn’t want to force it by default for performance.