CODEWITHSUNDEEP
javascriptjqueryvalidation
ministrymason
ministrymason

Reputation: 1793

Restrict text box to two decimal places in Javascript

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.

Upvotes: 2

Views: 14052

Answers (5)

Sunil
Sunil

Reputation: 138

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());
});

});

Upvotes: 0

Mike Clark
Mike Clark

Reputation: 1870

$("#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);
}

Upvotes: -1

Faraz
Faraz

Reputation: 761

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();
             }

        });
    });
};

Upvotes: 0

Oscar Jara
Oscar Jara

Reputation: 14187

Try this:

Live Demo: http://jsfiddle.net/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.

Upvotes: 3

thispatchofsky
thispatchofsky

Reputation: 854

How about applying a RegEx validation :

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

Hope this helps!

Upvotes: 0

Related Questions