I am trying to restrict a text box to two decimal places using JavaScript. The field also cannot start with a Period.

jQuery.fn.ForceCurrencyOnly = function () {
return this.each(function () {
    $(this).keypress(function () {

        //Only allow period and numbers
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }

        //Prevent a period being entered first
        else if (event.which == 46 && $(this).val().length == 0) {
           event.preventDefault();
        }

        //Only two numbers after a decimal
        else if (($(this).val().indexOf('.') != -1) && ($(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2)) {
           event.preventDefault();
        }
    });
});

};

The above restricts the input to numbers, a single period and a maximum of two decimal places. My problem is once 100.00 is entered, the value cannot be highlighted and removed with a number. It has to be deleted.

Is there a simpler way of only allowing a currency with two decimal places?

Any help appreciated.

I am trying to restrict a text box to two decimal places using JavaScript. The field also cannot start with a Period.

jQuery.fn.ForceCurrencyOnly = function () {
return this.each(function () {
    $(this).keypress(function () {

        //Only allow period and numbers
        if ((event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
            event.preventDefault();
        }

        //Prevent a period being entered first
        else if (event.which == 46 && $(this).val().length == 0) {
           event.preventDefault();
        }

        //Only two numbers after a decimal
        else if (($(this).val().indexOf('.') != -1) && ($(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2)) {
           event.preventDefault();
        }
    });
});

};

The above restricts the input to numbers, a single period and a maximum of two decimal places. My problem is once 100.00 is entered, the value cannot be highlighted and removed with a number. It has to be deleted.

Is there a simpler way of only allowing a currency with two decimal places?

Any help appreciated.

• javascript
• jquery
• validation

Share Improve this question Follow asked May 9, 2014 at 14:51 ministrymasonministrymason 1,79322 gold badges2020 silver badges3434 bronze badges 1

• Edited my answer. It should work if you are using html5. – thispatchofsky Commented May 9, 2014 at 15:03

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

Try this:

Live Demo: http://jsfiddle/oscarj24/8JEF9/

---

HTML:

Number: <input type="text" id="txt" />

jQuery:

Create a jQuery function to always get a number in the expected format:

jQuery.fn.getNum = function() {

    /* trim the string value */
    var val = $.trim($(this).val());

    /* replace all ',' to '.' if present */
    if(val.indexOf(',') > -1) {
        val = val.replace(',', '.');
    }

    /* parse the string as float */
    var num = parseFloat(val);

    /* use two decimals for the number */
    var num = num.toFixed(2);

    /* check if 'num' is 'NaN', this will happen 
     * when using characters, two '.' and apply 
     * for other cases too.
     */ 
    if(isNaN(num)) {
        num = '';
    }

    return num;
}

Then, force the textbox to have the expected value using .blur(..)

$(function() { //onReady handler for document

    $('#txt').blur(function() { //onBlur handler for textbox
        $(this).val($(this).getNum()); //invoke your function, you can use it with other selectors too
    });

});

Just to know, if you put something like 20.129, your textbox value will be 20.13 (this means that the value will be rounded).

I've tested many possible situations and works fine, maybe you can customize the function as you wish for other purposes.

How about applying a RegEx validation :

<input type="text" pattern="^[0-9]*\.[0-9]{2}$" />

Hope this helps!

Just check if entered key is not backspace in final check

jQuery.fn.ForceCurrencyOnly = function() {
    return this.each(function() {
        $(this).keypress(function(event) {


             console.log(event.which);
             //Only allow period and numbers
             //Only allow period and numbers
             if (event.which != 8 && (event.which != 46 || $(this).val().indexOf('.') != -1) && (event.which < 48 || event.which > 57)) {
             event.preventDefault();
             }

             //Prevent a period being entered first
             else if (event.which == 46 && $(this).val().length == 0) {
             event.preventDefault();
             }

             //Only two numbers after a decimal
             else if ( event.which != 8 && (event.which < 48 || event.which > 57) && ($(this).val().indexOf('.') != -1) && ($(this).val().substring($(this).val().indexOf('.'), $(this).val().indexOf('.').length).length > 2)) {
             event.preventDefault();
             }

        });
    });
};

try this..

jQuery.fn.getNum = function() {
var val = $.trim($(this).val());
if(val.indexOf(',') > -1) {
    val = val.replace(',', '.');
}
var num = parseFloat(val);
var num = num.toFixed(1);
if(isNaN(num)) {
    num = '';
}
return num;
}

$(function() {

$('#txt').keyup(function() {
    $(this).val($(this).getNum());
});

});

$("#YourtxtId").keypress(function () {
var txt = $("#YourtxtId").val();
if (txt.indexOf(".") > -1 && txt.split(".")[1].length > 1) {
var substr = txt.split(".")[1].substring(0, 1);
$("#YourtxtId").val(txt.split(".")[0] + "." + substr);
}