How to properly set up a decimal mask using jQuery MaskedInput 1.3

Question

I am using jQuery 1.7.1 and jQuery maskedinput 1.3 in my ASP.NET MVC 3 app.

How would I set up a masked item that accepts a decimal value (SQL decimal 10,2). What I have works but it looks horrible:

$('#AnnualIncome').mask('9?9999999.99', { placeholder: ' ' });

When I go to my page and click on the textbox then there is space for numeric values with a . further on for the decimal part. This looks horrible and it doesn't seem to work well. I will type in 9 for the left part of the decimal and then 99 for the right part of the decimal. So if the textbox still has the focus then it looks something like this:

9___________.99

I don't want it like this, I want the user to be able to type in a decimal anytime, I want something like:

9.99

Also, if the textbox looses focus, then it now looks like:

999

I need it to display:

9.99

Can someone please help me set this up properly?

Answer 1

The Masked Input jQuery Plugin is meant for fixed width input, like formatting phone numbers. Have a look at e.g. the numeric Plugin or the autoNumeric Plugin instead.

Answer 2

The Masked Input jQuery Plugin can be configured to support variable width decimal places.

Firstly add a mask definition that supports your local decimal place separator or numeric characters:

$.mask.definitions['d'] = '[0-9.]';

Then define the mask:

$('#AnnualIncome').mask('9?dddddddd', ' ');

Decimal places are optional and you cannot control the number of decimal places but still useful in certain scenarios and saves adding another plugin.