Mask with jQuery or HTML

Question

The Mask I need is this:

0000000-00.0000.0.00.0000

As I type in the input it is filled from right to left preserving the right zeros until it reaches the character limit of this string.

Examples:

0000000-00.0000.0.00.0000

0000000-00.0000.0.00.0001

0000000-00.0000.0.00.0012

0000000-00.0000.0.00.0123

0000000-00.0000.0.00.1234

0000000-00.0000.0.01.2345

0000000-00.0000.0.12.3456

0000000-00.0000.1.23.4567

0000000-00.0001.2.34.5678

0000000-00.0012.3.45.6789

0000000-00.0123.4.56.7891

0000000-00.1234.5.67.8912

0000000-01.2345.6.78.9123

0000000-12.3456.7.89.1234

0000001-23.4567.8.91.2345

....

In PHP you could use str_pad

Answer 1

Here is the idea of a possible solution, you create a function that will be fired in the text element of your HTML, every typing of a character. What she must do:

• Validate if the element is a number from 0 to 9.
• If it was validated, check if it exceeded the amount of elements 20 numbers by what I could see.

• if you arrived at the last element or if after typing the string lenght is 20 if it is, call another function to perform field formatting, and run the Blur() method to exit the field automatically.

• This formatting function should take 20-position number and store it in a variable later with the Slice method remove the first 7 characters and concatenate with "-", store it in a variable, str_final type, and continue removing elements from the original string and concatenating to str_final now with the dots. var str_original = "00000000333444455566"; var str_final = str_final + str_original.Slice(0,7) + "-"; str_final = str_final + ...;

If I think of something better I’ll pass it on to you...!