Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Text box to accept only number

4.50/5 (2 votes)
28 Apr 2011CPOL 12.4K  
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

Java
/*
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
Java
$(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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)