How do I make commas appear within my input?

Tips and tricks from Tamara Olson Designs

Simple with a little bit of jQuery.

$('input.number').keyup(function(event) {
// skip for arrow keys
if(event.which >= 37 && event.which <= 40) return;
// format number
$(this).val(function(index, value) {
return value
.replace(/\D/g, "")
.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
;
});
});



Share Your Thoughts

  • Gabriel Antonelli

    what if you want to allow negative numbers?

About the Author

TamaraAuthorPhoto

Tamara Olson is a self-employed UX designer and WordPress developer living in New York City.

Tamara Olson Designs Case Studies