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 javascript...
any ideas?
-
Not without JavaScript. Why don't you just use password fields?Tatu Ulmanen– Tatu Ulmanen2010-08-26 11:08:22 +00:00Commented Aug 26, 2010 at 11:08
-
4Just curious, why do you want to emulate the password field when its already there?Kristoffer Sall-Storgaard– Kristoffer Sall-Storgaard2010-08-26 11:08:53 +00:00Commented Aug 26, 2010 at 11:08
-
Maybe you want to input a credit card, and mask the numbers. Blind users are told by the browser that this is a PASSWORD field, and it clearly is not.Andy– Andy2018-06-08 20:42:56 +00:00Commented Jun 8, 2018 at 20:42
-
Another use case is if you don't want the browser to try to save the field's value after the form submits. Most browsers seem to try to act like password managers these daysdevinm– devinm2022-12-12 15:45:18 +00:00Commented Dec 12, 2022 at 15:45
Add a comment
|
3 Answers
This may be the answer you were looking for:
-webkit-text-security: disc;
-moz-text-security: disc;
text-security: disc;
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.
4 Comments
fredley
"Don't reinvent the wheel" Amen brother.
andreas
"•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
derekerdmann
@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
@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.
Have a read of this: http://www.puremango.co.uk/mask/
4 Comments
andreas
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....
Kristoffer Sall-Storgaard
Opera mini goes through operas servers, you're already on thin ice security wise.
fredley
@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 :-)
Ankit Jaiswal
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.