How can I define input mask for price with jquery input mask

Question

I want to allow the user to enter the amount between 0 and 1000. Optionally he can enter the amount with cents. Examples of amounts I want to allow: 199.99, 29.90, 999.99, 0.01, 10, 999

I tried this, but it doesn't really work:

$('.input-price').mask('000.00', {reverse: true});

Is there any other, working way you can propose me?

Answer 1

Try this (JS)

  function isNumberDot(evt) { evt = (evt) ? evt : window.event; var charCode = (evt.which) ? evt.which : evt.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)&& charCode != 46 && charCode != 127) { return false; } return true; } 

 <input type="text" value="0.00" onKeyPress="return isNumberDot(event);" autocomplete="off" onFocus="this.select();" onChange="if(this.value=='NaN' || this.value==''){this.value='0.00'};this.value=parseFloat(this.value).toFixed(2);" > 

Answer 2

You can use the 9 placeholder, which makes the digit optional:

 $('.input-price').mask('099.99'); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js"></script> <input type="text" class="input-price" placeholder="Enter price..." />