jquery.numeric.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. /*
  2. *
  3. * Copyright (c) 2006-2011 Sam Collett (http://www.texotela.co.uk)
  4. * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
  5. * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
  6. *
  7. * Version 1.3
  8. * Demo: http://www.texotela.co.uk/code/jquery/numeric/
  9. *
  10. */
  11. (function($) {
  12. /*
  13. * Allows only valid characters to be entered into input boxes.
  14. * Note: fixes value when pasting via Ctrl+V, but not when using the mouse to paste
  15. * side-effect: Ctrl+A does not work, though you can still use the mouse to select (or double-click to select all)
  16. *
  17. * @name numeric
  18. * @param config { decimal : "." , negative : true }
  19. * @param callback A function that runs if the number is not valid (fires onblur)
  20. * @author Sam Collett (http://www.texotela.co.uk)
  21. * @example $(".numeric").numeric();
  22. * @example $(".numeric").numeric(","); // use , as separater
  23. * @example $(".numeric").numeric({ decimal : "," }); // use , as separator
  24. * @example $(".numeric").numeric({ negative : false }); // do not allow negative values
  25. * @example $(".numeric").numeric(null, callback); // use default values, pass on the 'callback' function
  26. *
  27. */
  28. $.fn.numeric = function(config, callback)
  29. {
  30. if(typeof config === 'boolean')
  31. {
  32. config = { decimal: config };
  33. }
  34. config = config || {};
  35. // if config.negative undefined, set to true (default is to allow negative numbers)
  36. if(typeof config.negative == "undefined") config.negative = true;
  37. // set decimal point
  38. var decimal = (config.decimal === false) ? "" : config.decimal || ".";
  39. // allow negatives
  40. var negative = (config.negative === true) ? true : false;
  41. // callback function
  42. var callback = typeof callback == "function" ? callback : function(){};
  43. // set data and methods
  44. return this.data("numeric.decimal", decimal).data("numeric.negative", negative).data("numeric.callback", callback).keypress($.fn.numeric.keypress).keyup($.fn.numeric.keyup).blur($.fn.numeric.blur);
  45. }
  46. $.fn.numeric.keypress = function(e)
  47. {
  48. // get decimal character and determine if negatives are allowed
  49. var decimal = $.data(this, "numeric.decimal");
  50. var negative = $.data(this, "numeric.negative");
  51. // get the key that was pressed
  52. var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
  53. // allow enter/return key (only when in an input box)
  54. if(key == 13 && this.nodeName.toLowerCase() == "input")
  55. {
  56. return true;
  57. }
  58. else if(key == 13)
  59. {
  60. return false;
  61. }
  62. var allow = false;
  63. // allow Ctrl+A
  64. if((e.ctrlKey && key == 97 /* firefox */) || (e.ctrlKey && key == 65) /* opera */) return true;
  65. // allow Ctrl+X (cut)
  66. if((e.ctrlKey && key == 120 /* firefox */) || (e.ctrlKey && key == 88) /* opera */) return true;
  67. // allow Ctrl+C (copy)
  68. if((e.ctrlKey && key == 99 /* firefox */) || (e.ctrlKey && key == 67) /* opera */) return true;
  69. // allow Ctrl+Z (undo)
  70. if((e.ctrlKey && key == 122 /* firefox */) || (e.ctrlKey && key == 90) /* opera */) return true;
  71. // allow or deny Ctrl+V (paste), Shift+Ins
  72. if((e.ctrlKey && key == 118 /* firefox */) || (e.ctrlKey && key == 86) /* opera */
  73. || (e.shiftKey && key == 45)) return true;
  74. // if a number was not pressed
  75. if(key < 48 || key > 57)
  76. {
  77. /* '-' only allowed at start and if negative numbers allowed */
  78. if(this.value.indexOf("-") != 0 && negative && key == 45 && (this.value.length == 0 || ($.fn.getSelectionStart(this)) == 0)) return true;
  79. /* only one decimal separator allowed */
  80. if(decimal && key == decimal.charCodeAt(0) && this.value.indexOf(decimal) != -1)
  81. {
  82. allow = false;
  83. }
  84. // check for other keys that have special purposes
  85. if(
  86. key != 8 /* backspace */ &&
  87. key != 9 /* tab */ &&
  88. key != 13 /* enter */ &&
  89. key != 35 /* end */ &&
  90. key != 36 /* home */ &&
  91. key != 37 /* left */ &&
  92. key != 39 /* right */ &&
  93. key != 46 /* del */
  94. )
  95. {
  96. allow = false;
  97. }
  98. else
  99. {
  100. // for detecting special keys (listed above)
  101. // IE does not support 'charCode' and ignores them in keypress anyway
  102. if(typeof e.charCode != "undefined")
  103. {
  104. // special keys have 'keyCode' and 'which' the same (e.g. backspace)
  105. if(e.keyCode == e.which && e.which != 0)
  106. {
  107. allow = true;
  108. // . and delete share the same code, don't allow . (will be set to true later if it is the decimal point)
  109. if(e.which == 46) allow = false;
  110. }
  111. // or keyCode != 0 and 'charCode'/'which' = 0
  112. else if(e.keyCode != 0 && e.charCode == 0 && e.which == 0)
  113. {
  114. allow = true;
  115. }
  116. }
  117. }
  118. // if key pressed is the decimal and it is not already in the field
  119. if(decimal && key == decimal.charCodeAt(0))
  120. {
  121. if(this.value.indexOf(decimal) == -1)
  122. {
  123. allow = true;
  124. }
  125. else
  126. {
  127. allow = false;
  128. }
  129. }
  130. }
  131. else
  132. {
  133. allow = true;
  134. }
  135. return allow;
  136. }
  137. $.fn.numeric.keyup = function(e)
  138. {
  139. var val = this.value;
  140. if(val.length > 0)
  141. {
  142. // get carat (cursor) position
  143. var carat = $.fn.getSelectionStart(this);
  144. // get decimal character and determine if negatives are allowed
  145. var decimal = $.data(this, "numeric.decimal");
  146. var negative = $.data(this, "numeric.negative");
  147. // prepend a 0 if necessary
  148. if(decimal != "")
  149. {
  150. // find decimal point
  151. var dot = val.indexOf(decimal);
  152. // if dot at start, add 0 before
  153. if(dot == 0)
  154. {
  155. this.value = "0" + val;
  156. }
  157. // if dot at position 1, check if there is a - symbol before it
  158. if(dot == 1 && val.charAt(0) == "-")
  159. {
  160. this.value = "-0" + val.substring(1);
  161. }
  162. val = this.value;
  163. }
  164. // if pasted in, only allow the following characters
  165. var validChars = [0,1,2,3,4,5,6,7,8,9,'-',decimal];
  166. // get length of the value (to loop through)
  167. var length = val.length;
  168. // loop backwards (to prevent going out of bounds)
  169. for(var i = length - 1; i >= 0; i--)
  170. {
  171. var ch = val.charAt(i);
  172. // remove '-' if it is in the wrong place
  173. if(i != 0 && ch == "-")
  174. {
  175. val = val.substring(0, i) + val.substring(i + 1);
  176. }
  177. // remove character if it is at the start, a '-' and negatives aren't allowed
  178. else if(i == 0 && !negative && ch == "-")
  179. {
  180. val = val.substring(1);
  181. }
  182. var validChar = false;
  183. // loop through validChars
  184. for(var j = 0; j < validChars.length; j++)
  185. {
  186. // if it is valid, break out the loop
  187. if(ch == validChars[j])
  188. {
  189. validChar = true;
  190. break;
  191. }
  192. }
  193. // if not a valid character, or a space, remove
  194. if(!validChar || ch == " ")
  195. {
  196. val = val.substring(0, i) + val.substring(i + 1);
  197. }
  198. }
  199. // remove extra decimal characters
  200. var firstDecimal = val.indexOf(decimal);
  201. if(firstDecimal > 0)
  202. {
  203. for(var i = length - 1; i > firstDecimal; i--)
  204. {
  205. var ch = val.charAt(i);
  206. // remove decimal character
  207. if(ch == decimal)
  208. {
  209. val = val.substring(0, i) + val.substring(i + 1);
  210. }
  211. }
  212. }
  213. // set the value and prevent the cursor moving to the end
  214. this.value = val;
  215. $.fn.setSelection(this, carat);
  216. }
  217. }
  218. $.fn.numeric.blur = function()
  219. {
  220. var decimal = $.data(this, "numeric.decimal");
  221. var callback = $.data(this, "numeric.callback");
  222. var val = this.value;
  223. if(val != "")
  224. {
  225. var re = new RegExp("^\\d+$|\\d*" + decimal + "\\d+");
  226. if(!re.exec(val))
  227. {
  228. callback.apply(this);
  229. }
  230. }
  231. }
  232. $.fn.removeNumeric = function()
  233. {
  234. return this.data("numeric.decimal", null).data("numeric.negative", null).data("numeric.callback", null).unbind("keypress", $.fn.numeric.keypress).unbind("blur", $.fn.numeric.blur);
  235. }
  236. // Based on code from http://javascript.nwbox.com/cursor_position/ (Diego Perini <[email protected]>)
  237. $.fn.getSelectionStart = function(o)
  238. {
  239. if (o.createTextRange)
  240. {
  241. var r = document.selection.createRange().duplicate();
  242. r.moveEnd('character', o.value.length);
  243. if (r.text == '') return o.value.length;
  244. return o.value.lastIndexOf(r.text);
  245. } else return o.selectionStart;
  246. }
  247. // set the selection, o is the object (input), p is the position ([start, end] or just start)
  248. $.fn.setSelection = function(o, p)
  249. {
  250. // if p is number, start and end are the same
  251. if(typeof p == "number") p = [p, p];
  252. // only set if p is an array of length 2
  253. if(p && p.constructor == Array && p.length == 2)
  254. {
  255. if (o.createTextRange)
  256. {
  257. var r = o.createTextRange();
  258. r.collapse(true);
  259. r.moveStart('character', p[0]);
  260. r.moveEnd('character', p[1]);
  261. r.select();
  262. }
  263. else if(o.setSelectionRange)
  264. {
  265. o.focus();
  266. o.setSelectionRange(p[0], p[1]);
  267. }
  268. }
  269. }
  270. })(jQuery);