Cómo configurar correctamente una máscara decimal usando jQuery MaskedInput 1.3

Question

Estoy usando jQuery 1.7.1 y jQuery maskedinput 1.3 en mi aplicación ASP.NET MVC 3.

Cómo puedo configurar un elemento enmascarado que acepte un valor decimal (SQL decimal 10,2). Lo que tengo obras, sino que se ve horrible:

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

Cuando voy a mi página y haga clic en el cuadro de texto a continuación, hay espacio para los valores numéricos con una. más adelante para la parte decimal. Esto se ve horrible y no parece funcionar bien. Escribiré 9 para la parte izquierda del decimal y luego 99 para la parte derecha del decimal. Así que si el cuadro de texto todavía tiene el foco entonces se ve algo como esto:

9___________.99 

no quiero que de esta manera, quiero que el usuario sea capaz de escribir en un decimal en cualquier momento, quiero algo como:

9.99 

Además, si el cuadro de texto pierde el foco, a continuación, ahora parece que:

999 

lo necesito para mostrar:

9.99 

¿Alguien puede ayudarme a configurar esto correctamente?

Answer 1

La Masked Input jQuery Plugin está pensada para de ancho fijo entrada, como el formateo de números de teléfono. Eche un vistazo a, por ejemplo, el numeric Plugin o el autoNumeric Plugin en su lugar.

Answer 2

El Masked Input jQuery Plugin se puede configurar para admitir lugares decimales de ancho variable.

añadir primer lugar una definición máscara que apoya su separador decimal local o caracteres numéricos:

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

definir la máscara:

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

Decimales son opcionales y no se puede controlar el número de decimales, pero sigue siendo útil en ciertos escenarios y ahorra agregar otro complemento.