Change Text To Dots In Text Field With Css/javascript

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 ja

Solution 1:

This may be the answer you were looking for:

-webkit-text-security: disc;
-moz-text-security: disc;
text-security: disc;

Solution 2:

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.

Solution 3:

Have a read of this: http://www.puremango.co.uk/mask/