O'Reilly logo

HTML5 and CSS3 Responsive Web Design Cookbook by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required