CODEWITHSUNDEEP
jqueryhtmlinputmask
o_O
o_O

Reputation: 5737

Force decimals in html inputs with html or js? Mask

So I have an input, and by default I want it to have the value 0.00. Easy enough.

When a user starts typing, I want to fill from the right. So when they enter "5", the input will show "0.05." Then they enter a zero and the input changes to "0.50" and so on. So if the user wanted to enter 5 dollars, they would just enter 5, 0, 0.

Is there a pretty straightforward way to do this? I have tried searching around but I think I'm missing the right keywords for my search phrases. I don't know what to call this, so sorry if this is a duplicate.

Thanks.

Upvotes: 1

Views: 5729

Answers (3)

Bakudan
Bakudan

Reputation: 19492

meioMask site github has what you are searching for. Demo on their site.

Upvotes: 2

honyovk
honyovk

Reputation: 2747

You can easily do this with jQuery and a jQuery plugin.

A simple search yielded this result: https://github.com/madeinstefano/Decimal-Mask

EDIT: After running this in a Fiddle, it seems that the plugin I posted does not do exactly what you want. http://jsfiddle.net/YAQMS/

UPDATE: I've found a better solution - https://github.com/digitalBush/jquery.maskedinput

See this Fiddle: http://jsfiddle.net/YAQMS/1/

Upvotes: 3

kevin628
kevin628

Reputation: 3526

You can align input to right in your CSS like so:

input#my_input {
  text-align: right;
}

And for input masking, here's a Google search that might help: https://www.google.com/search?q=html+input+masking

Upvotes: 2

Related Questions