Easy Code Stuff: Restrict To Enter Only Decimal Using Java Script

In this article I'm going to show guys, how to restrict a text field only to enter decimal values. And most importantly you can tell the function how many decimal places you want to restrict.

Have a look on the code. It's simply created using Html and JavaScript.

<html>
<body>
    <label>One Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,1)" />
    <br />

    <label>Two Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,2)" />
    <br />

    <label>Five Decimal Only</label>
    <input type="text" onpaste="return false" onkeypress="return restrictToDecimal(this,event,5)" />
</body>
<script type="text/javascript">
    function restrictToDecimal(el, evt, dec) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        var number = el.value.split('.');
        if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }

        //Restrict To Enter One Period
        if (number.length > 1 && charCode == 46) {
            return false;
        }

        //Getting The Character Position Entered
        var caratPos = getSelectionStart(el);
        var dotPos = el.value.indexOf(".");
        if (caratPos > dotPos && dotPos > -1 && (number[1].length > dec - 1)) {
            return false;
        }

        return true;
    }

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }
</script>
</html>

If you want use following single JavaScript to do it.

function restrictToDecimal(el, evt, dec) {
    var charCode = (evt.which) ? evt.which : event.keyCode;
    var number = el.value.split('.');
    if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }

    //Restrict To Enter One Period
    if (number.length > 1 && charCode == 46) {
        return false;
    }

    //Getting The Character Position Entered
    var caratPos = getSelectionStart(el);
    var dotPos = el.value.indexOf(".");
    if (caratPos > dotPos && dotPos > -1 && (number[1].length > dec - 1)) {
        return false;
    }

    return true;

    function getSelectionStart(o) {
        if (o.createTextRange) {
            var r = document.selection.createRange().duplicate()
            r.moveEnd('character', o.value.length)
            if (r.text == '') return o.value.length
            return o.value.lastIndexOf(r.text)
        } else return o.selectionStart
    }

}

Easy Code Stuff

Oct 17, 2015

Restrict To Enter Only Decimal Using Java Script

No comments:

JWT Token Decode Using Jquery