Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can jQuery add commas while user typing numbers?

How would I go about dynamically adding commas as a user is entering numbers? Is there a good number formatter that would help? I have to add these numbers later so I eventually have to remove the commas down the line. But the screen needs to show the commas for better readability.

like image 471
Matt Avatar asked Apr 13 '10 18:04

Matt


2 Answers

Run the code snippet to see it work

$('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, ",")      ;    });  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>  <input class="number">
like image 197
maček Avatar answered Sep 28 '22 00:09

maček


Here's an implementation of @maček's answer in vanilla JS if you don't want to use jQuery:

var el = document.querySelector('input.number');  el.addEventListener('keyup', function (event) {    if (event.which >= 37 && event.which <= 40) return;      this.value = this.value.replace(/\D/g, '')                           .replace(/\B(?=(\d{3})+(?!\d))/g, ',');  });
<input class="number">
like image 45
aboutaaron Avatar answered Sep 28 '22 02:09

aboutaaron