Super usable forms

Somehow on Habré a dispute broke out about how to force the user to enter the date in the correct format, there were a lot of interesting decisions, but to force the user to be completely unnecessary - let machines do the main work for the user :-).

A wonderful script “Masked Input Plugin” comes to the rescue, which allows you to assign a mask to each form, according to which the data will be filled.
')
Perhaps you did not quite understand, but it’s better to see once than to hear a hundred times.

Living example

Unfortunately, a live example on the Habra is not inserted, click on the picture to see it.

Implementing forms with a mask

As you already understood, first we need the script “Masked Input Plugin” written in jQuery, its size really pleases 2.8 kilobytes .

So small, and so much good!

And so, an example of using the script:

  <script type = "text / javascript">
 jQuery (function ($) {
 $ ("# date"). mask ("99/99/9999");
 $ ("# phone"). mask ("(999) 999-9999");
 $ ("# tin"). mask ("99-9999999");
 $ ("# ssn"). mask ("999-99-9999");
 });
 </ script> 

This script will add a recognized mask for forms with id: date , phone , tin , ssn .

Now about the masked characters:

• a - All alphabetic values ​​(AZ, az)
• 9 - All numeric values ​​(0-9)
• * - Any alphanumeric values ​​(AZ, az, 0-9)

Now more advanced features:

  jQuery (function ($) {
    $ ("# product"). mask ("99/99/9999", {placeholder: ""});
 }); 

This script allows you to replace the standard for the underscore with any cat you want, in this case it is replaced with a space.

 jQuery (function ($) {
    $ ("# product"). mask ("99/99/9999", {completed: function () {alert ("You have entered:" + this.val ());}});
 });

This allows you to perform any function on the assurance of input into the form.

In brief, I described the functionality, in more detail you can read on the website of the author of this wonderful script.

Visit the Masked Input Plugin page

Subscribe to Chernev's notes via RSS