Restrict input field to two decimals with jQuery

Question

I have an input field which I want to restrict so that the user only can input a number with the maximum of two decimals. Want to do this using jQuery.

Could I use j

Answer 1

<input type="text" id="decCheck" onkeyup="decimalCheck();"/>

<script>
function decimalCheck(){
var dec = document.getElementById('decCheck').value;
if(dec.includes(".")){
    var res = dec.substring(dec.indexOf(".")+1);
    var kl = res.split("");
    if(kl.length > 1){
     document.getElementById('decCheck').value=(parseInt(dec * 100) / 
      100).toFixed(2);
    }
  }
}
</script>

Answer 2

$('input#decimal').blur(function(){
    var num = parseFloat($(this).val());
    var cleanNum = num.toFixed(2);
    $(this).val(cleanNum);
    if(num/cleanNum < 1){
        $('#error').text('Please enter only 2 decimal places, we have truncated extra points');
        }
    });

Here is a fiddle http://jsfiddle.net/sabithpocker/PD2nV/

Using toFixed will anyhow cause approximation 123.6666 -> 123.67 If you want to avoid approximation check this answer Display two decimal places, no rounding

Answer 3

$("#myInput").focusout(function() {
    if ($(this).val().length > 2 || isNaN(Number($(this).val())) {
        alert("Wrong number format");
    }
});

Answer 4

An alternative approach with a regular expression:

    $('#id').on('input', function () {
        this.value = this.value.match(/^\d+\.?\d{0,2}/);
    });

The id selector can be replaced by a css selector.

Answer 5

A HTML5 solution:

<input type="number" step="0.01" />

Demo

If you want to style invalid inputs (some browsers do it by default), you can use :invalid selector:

input:invalid {   box-shadow: 0 0 1.5px 1px red;   }

Note this approach won't attempt to truncate the number automagically, but if the user enters more than two decimal digits, the input will become invalid, and thus the form won't be submitted:

Answer 6

<input type="text" name="amount1" id="amount1" class="num_fld Amt" onkeypress="return check_digit(event,this,8,2);" size="9" value="" maxlength="8" style="text-align:right;" />

The following function will restrict decimals according to your need of decimal places and also restrict more than one dot

function check_digit(e,obj,intsize,deczize) {
    var keycode;

    if (window.event) keycode = window.event.keyCode;
    else if (e) { keycode = e.which; }
    else { return true; }

    var fieldval= (obj.value),
        dots = fieldval.split(".").length;

    if(keycode == 46) {
        return dots <= 1;
    }
    if(keycode == 8 || keycode == 9 || keycode == 46 || keycode == 13 ) {
        // back space, tab, delete, enter 
        return true;
    }          
    if((keycode>=32 && keycode <=45) || keycode==47 || (keycode>=58 && keycode<=127)) {
         return false;
    }
    if(fieldval == "0" && keycode == 48 ) {
        return false;
    }
    if(fieldval.indexOf(".") != -1) { 
        if(keycode == 46) {
            return false;
        }
        var splitfield = fieldval.split(".");
        if(splitfield[1].length >= deczize && keycode != 8 && keycode != 0 )
            return false;
        }else if(fieldval.length >= intsize && keycode != 46) {
            return false;
        }else {
            return true;
        }
    }
}