jugadore
jugadore

Reputation: 13

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

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?

Upvotes: 1

Views: 3555

Answers (2)

Carsten
Carsten

Reputation: 943

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..." />

Upvotes: 2

Waruna Manjula
Waruna Manjula

Reputation: 3497

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);"
    >

Upvotes: 0

Related Questions