Restrict (Prevent) to 2 decimal places in KeyPress after decimal point in JavaScript and jQuery

Last Reply 6 months ago By dharmendr

Posted 6 months ago

I have the below code which validates for 18,2 that means it allows 18 digits and after 18 digits it will add a (.) and after (.) it will accept only two numbers which is fine but if i am again adding numbers before (.) it is taking which should not happen

how can i resolve this

function fnValidate() {  //new
    $('#txt').keypress(function (event) {
        debugger;
        var $this = $(this);
        if ((event.which != 46 || $this.val().indexOf('.') != -1) && ((event.which < 48 || event.which > 57) && (event.which != 0 && event.which != 8))) {
            event.preventDefault();
        }
        var text = $(this).val();
        if (text.length === 18) {
            $(this).val(text + ".")
        }
        if ((event.which == 46) && (text.indexOf('.') == -1)) {
            setTimeout(function () {
                if ($this.val().substring($this.val().indexOf('.')).length > 3) {
                    $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));
                }
            }, 1);
        }

        if ((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2) && (event.which != 0 && event.which != 8) && ($(this)[0].selectionStart >= text.length - 2)) {
            event.preventDefault();
        }
    });
}
Posted 6 months ago

Hi kavithav,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#txtValue').keypress(function (event) {
                var $this = $(this);
                if ((event.which != 46 || $this.val().indexOf('.') != -1) && ((event.which < 48 || event.which > 57) && (event.which != 0 && event.which != 8))) {
                    event.preventDefault();
                }
                var text = $(this).val();
                if (text.length === 18) {
                    $(this).val(text + ".")
                }
                if ((event.which == 46) && (text.indexOf('.') == -1)) {
                    setTimeout(function () {
                        if ($this.val().substring($this.val().indexOf('.')).length > 3) {
                            $this.val($this.val().substring(0, $this.val().indexOf('.') + 3));
                        }
                    }, 1);
                }
                if ((text.indexOf('.') == 18 && text.substring(text.indexOf('.')).length > 2)) {
                    event.preventDefault();
                }
                if (((text.indexOf('.') != -1) && (text.substring(text.indexOf('.')).length > 2) && (event.which != 0 && event.which != 8) && ($(this)[0].selectionStart >= text.length - 2))) {
                    event.preventDefault();
                }
            });
        });
    </script>
</head>
<body>
    <input name="txtValue" type="text" id="txtValue" style="width: 200px" />
</body>
</html>

Demo