HTML5 and CSS3: Building Responsive Websites

Masking a password with unobtrusive JavaScript

The most common way to handle masking a password is to use the password type when creating an input element. This is the best practice when used on a desktop. When entering a password on a mobile device however, there is a high potential for input error on the device's touch input. These input errors are often not caught because you cannot see the encrypted text. This is a problem that the designers of iOS really got right. They created an input where the input text is visible for a short time before turning into a *, or changes upon entry of the next character.

In this recipe, we will create a password input that mimics this solution for your password input.

You can use this form element to mask other ...