How to allow numeric (0-9) & decimal value textbox using jQuery?

Question

i wrote few line to accept only numeric character but my script is not working. when i type any alphabet then it is getting inserted into textbox which i do not want. i want that textbox should accept only numeric value and "." point for decimal. here is my script. just tell me what is wrong there.

 $().ready(function () {
        $("input[id*='txtQty']").keyup(function (event) {
            var flag = false;

            if (event.shiftKey == true) {
                event.preventDefault();
            }
            // Allow Only: keyboard 0-9, numpad 0-9, backspace, tab, left arrow, right arrow, delete
            if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46) {
                // Allow normal operation
                flag = true;
            } else {
                // Prevent the rest
                event.preventDefault();
            }

            if (flag) {

            }
        });
    });

if possible please give me script which will enable my textbox only numeric and decimal number. thanks

here is my full script. the problem is it is taking dot "." which i dont want.

        $().ready(function () {
        $("input[id*='txtQty']").keydown(function (event) {
            var flag = true;

            if (event.shiftKey == true) {
                event.preventDefault();
                flag = false;
            }

            if ((event.keyCode >= 48 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {

            } else {
                event.preventDefault();
                flag = false;
            }

            if (flag) {
                if (jQuery.trim(this.value) != "") {
                    if (IsNumeric(jQuery.trim(this.value)) == true) {
                        var Symbol = $("span[id*='lblPrice']").text().trim().substring(1, 0);
                        var oldprice = $("input[id*='txtHiddenPrice']").val();
                        var newprice = Math.round((oldprice * this.value), 2);
                        $("span[id*='lblPrice']").text(Symbol + newprice);
                        UpdateCart($(this).closest('tr').find("input[id*='txtItemId']").val(), $(this).closest('tr').find("input[id*='txtProductId']").val(), this.value);
                    }
                }
            }
        });
    });

so tell me what i need to change in my code as a result it should not take decimal value. another important thing i attach keydown() event with wild card system because my page may have many textbox with name end like txtQty.

 $("input[id*='txtQty']").keyup(function (event) {

so please help me. thanks

Answer 1

You cant use e.preventDefault() it on the keyup event. Change it to keydown.

$(function () {
    $("input[id*='txtQty']").keydown(function (event) {


        if (event.shiftKey == true) {
            event.preventDefault();
        }

        if ((event.keyCode >= 48 && event.keyCode <= 57) || 
            (event.keyCode >= 96 && event.keyCode <= 105) || 
            event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 37 ||
            event.keyCode == 39 || event.keyCode == 46 || event.keyCode == 190) {

        } else {
            event.preventDefault();
        }

        if($(this).val().indexOf('.') !== -1 && event.keyCode == 190)
            event.preventDefault(); 
        //if a decimal has been added, disable the "."-button

    });
});​

Fiddle

Answer 2

You could remove the non numeric char when keyup.

$("#txtQty").keyup(function() {
    var $this = $(this);
    $this.val($this.val().replace(/[^\d.]/g, ''));        
});​

The demo.