65.9K
CodeProject is changing. Read more.
Home

Text box to accept only number

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.50/5 (2 votes)

Apr 28, 2011

CPOL
viewsIcon

12371

I have created a jQuery code to achieve this/*User Options --allowHex:Allow hexadecimal number default falseallowNeg:Allow negative default falseonlyInteger:did not allow decimal default true*/$(function () { var mergedOptions = {}; var common = { allowHex:...

I have created a jQuery code to achieve this
/*
User Options --
allowHex:Allow hexadecimal number default false
allowNeg:Allow negative default false
onlyInteger:did not allow decimal default true
*/
$(function () {
    var mergedOptions = {};
    var common = {
        allowHex: false,
        allowNeg: false,
        onlyInteger: false
    };
});
var normalizeValue = function (val) {
    switch (val) {
        case 'undefined':
            val = undefined;
            break;
        case 'null':
            val = null;
            break;
        case 'true':
            val = true;
            break;
        case 'false':
            val = false;
            break;
        default:
            var nf = parseFloat(val);
            if (val == nf) {
                val = nf;
            }
    }
    return val;
};
$.fn.numericbox = function (userOptions) {
    return this.each(function () {
        $(this).keydown(function (e) {
            var key = e.charCode || e.keyCode || 0;
            var val = e.currentTarget.value;
            var options = new $.fn.numericbox.options(this, userOptions);
            // allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
            if (key == 45 && options.get('allowNeg') && val.indexOf('-') < 0) {
                e.currentTarget.value = "-" + e.currentTarget.value;
            }
           return (
                key == 8 ||
                key == 9 ||
                key == 46 ||
                (key == 190 && !options.get('onlyInteger') && val.indexOf('.') < 0) ||
                (key >= 37 && key <= 40) ||
                (key >= 48 && key <= 57) ||
                (((key >= 97 && key <= 102) || (key >= 65 && key <= 70)) && options.get('allowHex'))
                ); 
        })
    })
};
$.fn.numericbox.options = function (tag, userOptions) {
    this.userOptions = userOptions = userOptions || {};
    this.mergedOptions= $.extend({}, this.common, userOptions);
};
$.fn.numericbox.options.prototype.get = function (key) {
    return normalizeValue(this.mergedOptions[key]);
};
use this in any place like this
 $(document).ready(function () {
            $(".numeric").numericbox({ onlyInteger: true, allowNeg: true });
        });
this will make all the element (having css class numeric) to accept only complete either -ve or not, if you make alloqNeg:false then this will accept unsigned numbers only. You can use other jQuery selectors too. or you can directly call this as a function on keydown event. this Code is creating a function which add a keydown handler on every element calling this and in that code is checking is the key is printable or not based upon option passed by user. This is handling negative or +ve no, decimal and Int no, Dec and Hex formats.