From 99bea32d34cd5eaf8e61a7db926f92c9941219f8 Mon Sep 17 00:00:00 2001 From: Abbas Zolfaghari Date: Tue, 24 Sep 2013 18:07:47 +0330 Subject: [PATCH] Add thousand seperator for jquery.numeric.js Add thousand separator for Integer part of inputted number. decimal part won't format with ',' separator. * @name numeric * @param config { decimal : "." , negative : true , separator : "," } * @param callback A function that runs if the number is not valid (fires onblur) * @example $(".numeric").numeric(); * @example $(".numeric").numeric({ separator : "," }); // use , as separator * @example $(".numeric").numeric({ decimal : "." , separator : "," }); // use , as separator * @example $(".numeric").numeric({ negative : false , separator : "," }); // do not allow negative values --- jquery.numeric.js | 330 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 330 insertions(+) create mode 100644 jquery.numeric.js diff --git a/jquery.numeric.js b/jquery.numeric.js new file mode 100644 index 0000000..159fd9d --- /dev/null +++ b/jquery.numeric.js @@ -0,0 +1,330 @@ +/* + * + * Copyright (c) 2006-2011 Sam Collett (http://www.texotela.co.uk) + * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) + * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. + * + * Version 1.3.1 + * Demo: http://www.texotela.co.uk/code/jquery/numeric/ + * + */ +(function($) +{ + /* + * Allows only valid characters to be entered into input boxes. + * Note: fixes value when pasting via Ctrl+V, but not when using the mouse to paste + * side-effect: Ctrl+A does not work, though you can still use the mouse to select (or double-click to select all) + * + * @param config { decimal : "." , negative : true , separator : "," } + * @param callback A function that runs if the number is not valid (fires onblur) + * @author Sam Collett (http://www.texotela.co.uk) + * @example $(".numeric").numeric(); + * @example $(".numeric").numeric({ separator : "," }); // use , as separator + * @example $(".numeric").numeric({ decimal : "." , separator : "," }); // use , as separator + * @example $(".numeric").numeric({ negative : false , separator : "," }); // do not allow negative values + * @example $(".numeric").numeric(null, callback); // use default values, pass on the 'callback' function + * + */ + $.fn.numeric = function(config, callback) + { + if(typeof config === 'boolean') + { + config = { decimal: config }; + } + config = config || {}; + // if config.negative undefined, set to true (default is to allow negative numbers) + if(typeof config.negative == "undefined") { config.negative = true; } + // set decimal point + var decimal = (config.decimal === false) ? "" : config.decimal || "."; + // set separator + var separator = (config.separator === false) ? "" : config.separator || ""; + // allow negatives + var negative = (config.negative === true) ? true : false; + // callback function + callback = (typeof(callback) == "function" ? callback : function() {}); + // set data and methods + return this.data("numeric.decimal",decimal).data("numeric.separator",separator).data("numeric.negative",negative).data("numeric.callback",callback).keypress($.fn.numeric.keypress).keyup($.fn.numeric.keyup).blur($.fn.numeric.blur); + }; + + $.fn.numeric.keypress = function(e) + { + // get decimal character and determine if negatives are allowed + var decimal = $.data(this, "numeric.decimal"); + var negative = $.data(this, "numeric.negative"); + // get the key that was pressed + var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; + // allow enter/return key (only when in an input box) + if(key == 13 && this.nodeName.toLowerCase() == "input") + { + return true; + } + else if(key == 13) + { + return false; + } + var allow = false; + // allow Ctrl+A + if((e.ctrlKey && key == 97 /* firefox */) || (e.ctrlKey && key == 65) /* opera */) { return true; } + // allow Ctrl+X (cut) + if((e.ctrlKey && key == 120 /* firefox */) || (e.ctrlKey && key == 88) /* opera */) { return true; } + // allow Ctrl+C (copy) + if((e.ctrlKey && key == 99 /* firefox */) || (e.ctrlKey && key == 67) /* opera */) { return true; } + // allow Ctrl+Z (undo) + if((e.ctrlKey && key == 122 /* firefox */) || (e.ctrlKey && key == 90) /* opera */) { return true; } + // allow or deny Ctrl+V (paste), Shift+Ins + if((e.ctrlKey && key == 118 /* firefox */) || (e.ctrlKey && key == 86) /* opera */ || + (e.shiftKey && key == 45)) { return true; } + // if a number was not pressed + if(key < 48 || key > 57) + { + var value = $(this).val(); + /* '-' only allowed at start and if negative numbers allowed */ + if(value.indexOf("-") !== 0 && negative && key == 45 && (value.length === 0 || parseInt($.fn.getSelectionStart(this), 10) === 0)) { return true; } + /* only one decimal separator allowed */ + if(decimal && key == decimal.charCodeAt(0) && value.indexOf(decimal) != -1) + { + allow = false; + } + // check for other keys that have special purposes + if( + key != 8 /* backspace */ && + key != 9 /* tab */ && + key != 13 /* enter */ && + key != 35 /* end */ && + key != 36 /* home */ && + key != 37 /* left */ && + key != 39 /* right */ && + key != 46 /* del */ + ) + { + allow = false; + } + else + { + // for detecting special keys (listed above) + // IE does not support 'charCode' and ignores them in keypress anyway + if(typeof e.charCode != "undefined") + { + // special keys have 'keyCode' and 'which' the same (e.g. backspace) + if(e.keyCode == e.which && e.which !== 0) + { + allow = true; + // . and delete share the same code, don't allow . (will be set to true later if it is the decimal point) + if(e.which == 46) { allow = false; } + } + // or keyCode != 0 and 'charCode'/'which' = 0 + else if(e.keyCode !== 0 && e.charCode === 0 && e.which === 0) + { + allow = true; + } + } + } + // if key pressed is the decimal and it is not already in the field + if(decimal && key == decimal.charCodeAt(0)) + { + if(value.indexOf(decimal) == -1) + { + allow = true; + } + else + { + allow = false; + } + } + } + else + { + allow = true; + } + return allow; + }; + + $.fn.numeric.keyup = function(e) + { + var val = $(this).val(); + if(val && val.length > 0) + { + // get carat (cursor) position + var carat = $.fn.getSelectionStart(this); + var selectionEnd = $.fn.getSelectionEnd(this); + // get decimal character and determine if negatives are allowed + var decimal = $.data(this, "numeric.decimal"); + var separator = $.data(this, "numeric.separator"); + var negative = $.data(this, "numeric.negative"); + + // prepend a 0 if necessary + if(decimal !== "" && decimal !== null) + { + // find decimal point + var dot = val.indexOf(decimal); + // if dot at start, add 0 before + if(dot === 0) + { + this.value = "0" + val; + } + // if dot at position 1, check if there is a - symbol before it + if(dot == 1 && val.charAt(0) == "-") + { + this.value = "-0" + val.substring(1); + } + val = this.value; + } + + // if pasted in, only allow the following characters + var validChars = [0,1,2,3,4,5,6,7,8,9,'-',decimal]; + // get length of the value (to loop through) + var length = val.length; + // loop backwards (to prevent going out of bounds) + for(var i = length - 1; i >= 0; i--) + { + var ch = val.charAt(i); + // remove '-' if it is in the wrong place + if(i !== 0 && ch == "-") + { + val = val.substring(0, i) + val.substring(i + 1); + } + // remove character if it is at the start, a '-' and negatives aren't allowed + else if(i === 0 && !negative && ch == "-") + { + val = val.substring(1); + } + + var validChar = false; + // loop through validChars + for(var j = 0; j < validChars.length; j++) + { + // if it is valid, break out the loop + if(ch == validChars[j]) + { + validChar = true; + break; + } + } + // if not a valid character, or a space, remove + if(!validChar || ch == " ") + { + val = val.substring(0, i) + val.substring(i + 1); + } + } + + // remove extra decimal characters + var decimalPart = val.split(decimal)[1]; + val = val.replace(separator,""); + var firstDecimal = val.indexOf(decimal); + if(firstDecimal > 0) + { + val = val.split(decimal)[0]; + for(var k = length - 1; k > firstDecimal; k--) + { + var chch = val.charAt(k); + // remove decimal character + if(chch == decimal) + { + val = val.substring(0, k) + val.substring(k + 1); + } + } + } + + length = val.length; + var temp = ""; + var coma = 0; + for(var i = length - 1; i >= 0; i--) + { + temp = val.charAt(i) + temp; + + coma++; + var dd = coma % 3; + if(dd == 0) + { + temp = separator + temp; + } + } + if(temp[0] == separator) + { + val = temp.substring(1); + } + else + { + val = temp; + } + + if(firstDecimal > 0) + { + val = val + decimal + (decimalPart == undefined || decimalPart == 'undefined' ? '' : decimalPart); + } + + // get carat (cursor) position + var carat = val.length; //$.fn.getSelectionStart(this); + // set the value and prevent the cursor moving to the end + this.value = val; + $.fn.setSelection(this,[carat,selectionEnd]);//$.fn.setSelection(this,carat); + } + }; + + $.fn.numeric.blur = function() + { + var decimal = $.data(this, "numeric.decimal"); + var callback = $.data(this, "numeric.callback"); + var val = this.value; + if(val !== "") + { + var re = new RegExp("^\\d+$|^\\d*" + decimal + "\\d+$"); + if(!re.exec(val)) + { + callback.apply(this); + } + } + }; + + $.fn.removeNumeric = function() + { + return this.data("numeric.decimal", null).data("numeric.negative", null).data("numeric.callback", null).unbind("keypress", $.fn.numeric.keypress).unbind("blur", $.fn.numeric.blur); + }; + + // Based on code from http://javascript.nwbox.com/cursor_position/ (Diego Perini ) + $.fn.getSelectionStart = function(o) + { + if (o.createTextRange) + { + var r = document.selection.createRange().duplicate(); + r.moveEnd('character', o.value.length); + if (r.text === '') { return o.value.length; } + return o.value.lastIndexOf(r.text); + } else { return o.selectionStart; } + }; + + // Based on code from http://javascript.nwbox.com/cursor_position/ (Diego Perini ) + $.fn.getSelectionEnd = function(o) + { + if (o.createTextRange) { + var r = document.selection.createRange().duplicate() + r.moveStart('character', -o.value.length) + return r.text.length + } else return o.selectionEnd + }; + + // set the selection, o is the object (input), p is the position ([start, end] or just start) + $.fn.setSelection = function(o, p) + { + // if p is number, start and end are the same + if(typeof p == "number") { p = [p, p]; } + // only set if p is an array of length 2 + if(p && p.constructor == Array && p.length == 2) + { + if (o.createTextRange) + { + var r = o.createTextRange(); + r.collapse(true); + r.moveStart('character', p[0]); + r.moveEnd('character', p[1]); + r.select(); + } + else if(o.setSelectionRange) + { + o.focus(); + o.setSelectionRange(p[0], p[1]); + } + } + }; + +})(jQuery);