How improve the number formatting dynamics in a html form

314 Views Asked by At

Up to now, in our application, we are dealing with formatting numbers in forms in a quite classical way. We are using jquery and its plugin globalization.

If the user select an input element with a specific class (that represents the format type) then we unformat the value and when the user releases the focus, we format it again.

Is there a efficient way to never unformat numbers : if the user select the input field, then being able modify the value and keep the visible format.

EDIT

After having take a look to mplungjan comment, I would to know if it is possible to use the I18N format dictionary coming from the globalization plugin into the jquery masked input plugin.

EDIT 2

I would like to have the format of the mask adapted to the language of the user. And to I18N the client, we are using this plugin. This plugin possess a dictionary of format by culture.

In our application, the mayority of number fields have 2 decimals. Such as 1 000,00 in french, 1.000,00 in italian or 1,000.00 in english. If a field already has a value (1.000,00 in italian for the example), currently if the user select the field, on the focus, we will deformat the field and show it like this : 1000 (the decimal separator will be the . if there is non-zero decimal). And when the user will release the field.

I would like to improve this by keeping the formatted value while the field is focused. Except for the 2 decimals, there is no more constraints on numbers.

EDIT 3

I tried this mask plugin but I am not able to do exactly what I need. I would like to create a dynamic mask for any numbers with 2 decimals. But it would also be great that if the user does not write decimals numbers then it will autocomplete on blur event with .00 in english (and respectively ,00 in french and italian).

This mask is almost what I need (except for the autocompletion) : 9{1,3}( 999){0,3}[,99]. But its behaviour is still quite tricky for the user. The first block ("9{1,3}") has exactly the behaviour I am looking for. Then if the user just continues writing digits he will directly jump to the last block ("[,99]"). For writing large numbers the user has to write explicitly a space.

Latter i will be able to replace the space by the thousand separator and the "," by the decimal separator.

If anyone has an idea of how improve my mask or about a different plugin, I will be happy to read your comments.

0

There are 0 best solutions below