JavaScript Input Formatting

Javascript
1

Any suggestions on what to use for JavaScript input formatting? Currently, I’m looking for something that will do prices, i.e. turn 12345 into $123.45. It’d be great to have something more extendable so I could also have 12345 turn into 1/23/45 or a different format.

Any suggestions?

2

This library looks like it will do what you are asking: http://numeraljs.com/

3

This looks really slick. Unfortunately it doesn’t seem to do the formatting live. I neglected to mention that. I’m trying it for now because it does seem wonderfully clean.

4

@edwardloveall , can you elaborate on what you mean by doing it live?

5

When you type in a field, I’d love it to restrict and correct what you can type. For example if you try to type letters in a phone number, they don’t show up. If you start typing number in a price, it starts filling out the cents, puts a period after two numbers, and prepends a $ sign.

This plugin is actually pretty close, but doesn’t allow for formats that have a variable number of characters on the front end. Here’s a decent live example. I’m not sure this allows for flexible length either: http://firstopinion.github.io/formatter.js/demos.html

6

That’s something that would be fairly simple to adapt with any library.

$(".my-input").on("keyup", function() {
  $(".formatted-display-container").text(formatInput($(".my-input").val());
});
7

Ah ok, let me be a little more clear. The box that you’re typing into would be the one that’s being auto-formatted. I was an apprentice on a project with @harlow where he accomplished this. I wonder if he might be able to chime in?

What I ended up doing for now was:

$('#product_price').val(
  numeral($('#product_price').val())
  .format('$0,0.00')
)
8

Are you looking for something more like this? http://robinherbots.github.io/jquery.inputmask/

9

That works pretty well @joelq, thanks! For those wondering, I got it working relatively well with the RegEx extension and this mask:

$(selector).inputmask('Regex', {regex: "[0-9]+\\.[0-9]{2}"})

The only caveat is I couldn’t figure out how to get a $ sign in front of the price. A label will work just fine though.