Hey all
Is there a way to "mask" the input of a text field to act like a password field (to show dots instead of text) without making the text box of type password? We prefer CSS than javscript...
any ideas?
It uses Javascript.
anand
2010-08-26 11:13:43
this is due to security credit cards,passwords of banking type applications. we dont want users to save sensitive data on their pc/phone the issue is with opera mini on user's phones,the HTML tage autocomplete="off" doesnt work in Opera....
andreas
2010-08-26 11:14:21
Opera mini goes through operas servers, you're already on thin ice security wise.
Kristoffer S Hansen
2010-08-26 11:19:33
@anand, I appreciate that you would prefer a non JS solution but...There isn't one. Other than setting `input { color:white; background:white; }`, which is stupid :-)
fredley
2010-08-26 11:20:10
I don't even like the idea of implementing something like this when we have password field, offcourse until the OP defines some specific condition for this. I just mentioned it because a non-js solution was asked for the question.
anand
2010-08-26 11:37:07
+3
A:
There are ways to change the way the characters are displayed when they're being input into the field (http://blog.decaf.de/2009/07/iphone-like-password-fields-using-jquery/), but password masking cannot be achieved using basic CSS.
The only possible solution I can think of would be to create a font that only consists of your desired mask character (using that for every character) and then using an @font-face declaration to tell the input field to use that font. However, @font-face has poor browser support, so relying on it for such an important function is a dangerous idea.
Is there any reason that you don't want to use a standard password input field? Consider the benefits:
- Password fields work in every browser
- The masking is automatic
- They can be extensively styled, but it won't interfere with the password masking
- Browsers don't use autofill on password fields (unless there's a password manager installed)
If you need an input that works like a password field, just use the password field. Don't reinvent the wheel.
derekerdmann
2010-08-26 11:21:31
"•Browsers don't use autofill on password fields (unless there's a password manager installed)"@derekerdmann i know, but with mobile banking applications and Opera Mini we can't rely on the user disabling the password manager on the browser..hence why we need to have it disabled from the begining
andreas
2010-08-26 11:29:31
@andreas - You can't control how the user stores their personal information. For all you know, it could be written on a sticky note attatched to the phone. If it's in a password manager, then at least it's safe somewhere, usually encrypted. The best you can do is educate your users about the risks and let them decide for themselves.
derekerdmann
2010-08-26 12:00:46
@andreas - It it's really a concern, then go try out some other banks' systems and see how they handle logins. How does Bank of America's mobile site work? What's their authentication system? I'm not advocating replicating their work, but taking a look at how the rest of the industry handles the problem should help you understand where you need to go.
derekerdmann
2010-08-26 12:32:06