jquery.mask.js 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597
  1. /**
  2. * jquery.mask.js
  3. * @version: v1.14.11
  4. * @author: Igor Escobar
  5. *
  6. * Created by Igor Escobar on 2012-03-10. Please report any bug at http://blog.igorescobar.com
  7. *
  8. * Copyright (c) 2012 Igor Escobar http://blog.igorescobar.com
  9. *
  10. * The MIT License (http://www.opensource.org/licenses/mit-license.php)
  11. *
  12. * Permission is hereby granted, free of charge, to any person
  13. * obtaining a copy of this software and associated documentation
  14. * files (the "Software"), to deal in the Software without
  15. * restriction, including without limitation the rights to use,
  16. * copy, modify, merge, publish, distribute, sublicense, and/or sell
  17. * copies of the Software, and to permit persons to whom the
  18. * Software is furnished to do so, subject to the following
  19. * conditions:
  20. *
  21. * The above copyright notice and this permission notice shall be
  22. * included in all copies or substantial portions of the Software.
  23. *
  24. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  25. * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
  26. * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  27. * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  28. * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  29. * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  30. * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  31. * OTHER DEALINGS IN THE SOFTWARE.
  32. */
  33. /* jshint laxbreak: true */
  34. /* jshint maxcomplexity:17 */
  35. /* global define */
  36. 'use strict';
  37. // UMD (Universal Module Definition) patterns for JavaScript modules that work everywhere.
  38. // https://github.com/umdjs/umd/blob/master/jqueryPluginCommonjs.js
  39. (function (factory, jQuery, Zepto) {
  40. if (typeof define === 'function' && define.amd) {
  41. define(['jquery'], factory);
  42. } else if (typeof exports === 'object') {
  43. module.exports = factory(require('jquery'));
  44. } else {
  45. factory(jQuery || Zepto);
  46. }
  47. }(function ($) {
  48. var Mask = function (el, mask, options) {
  49. var p = {
  50. invalid: [],
  51. getCaret: function () {
  52. try {
  53. var sel,
  54. pos = 0,
  55. ctrl = el.get(0),
  56. dSel = document.selection,
  57. cSelStart = ctrl.selectionStart;
  58. // IE Support
  59. if (dSel && navigator.appVersion.indexOf('MSIE 10') === -1) {
  60. sel = dSel.createRange();
  61. sel.moveStart('character', -p.val().length);
  62. pos = sel.text.length;
  63. }
  64. // Firefox support
  65. else if (cSelStart || cSelStart === '0') {
  66. pos = cSelStart;
  67. }
  68. return pos;
  69. } catch (e) {}
  70. },
  71. setCaret: function(pos) {
  72. try {
  73. if (el.is(':focus')) {
  74. var range, ctrl = el.get(0);
  75. // Firefox, WebKit, etc..
  76. if (ctrl.setSelectionRange) {
  77. ctrl.setSelectionRange(pos, pos);
  78. } else { // IE
  79. range = ctrl.createTextRange();
  80. range.collapse(true);
  81. range.moveEnd('character', pos);
  82. range.moveStart('character', pos);
  83. range.select();
  84. }
  85. }
  86. } catch (e) {}
  87. },
  88. events: function() {
  89. el
  90. .on('keydown.mask', function(e) {
  91. el.data('mask-keycode', e.keyCode || e.which);
  92. el.data('mask-previus-value', el.val());
  93. el.data('mask-previus-caret-pos', p.getCaret());
  94. p.maskDigitPosMapOld = p.maskDigitPosMap;
  95. })
  96. .on($.jMaskGlobals.useInput ? 'input.mask' : 'keyup.mask', p.behaviour)
  97. .on('paste.mask drop.mask', function() {
  98. setTimeout(function() {
  99. el.keydown().keyup();
  100. }, 100);
  101. })
  102. .on('change.mask', function(){
  103. el.data('changed', true);
  104. })
  105. .on('blur.mask', function(){
  106. if (oldValue !== p.val() && !el.data('changed')) {
  107. el.trigger('change');
  108. }
  109. el.data('changed', false);
  110. })
  111. // it's very important that this callback remains in this position
  112. // otherwhise oldValue it's going to work buggy
  113. .on('blur.mask', function() {
  114. oldValue = p.val();
  115. })
  116. // select all text on focus
  117. .on('focus.mask', function (e) {
  118. if (options.selectOnFocus === true) {
  119. $(e.target).select();
  120. }
  121. })
  122. // clear the value if it not complete the mask
  123. .on('focusout.mask', function() {
  124. if (options.clearIfNotMatch && !regexMask.test(p.val())) {
  125. p.val('');
  126. }
  127. });
  128. },
  129. getRegexMask: function() {
  130. var maskChunks = [], translation, pattern, optional, recursive, oRecursive, r;
  131. for (var i = 0; i < mask.length; i++) {
  132. translation = jMask.translation[mask.charAt(i)];
  133. if (translation) {
  134. pattern = translation.pattern.toString().replace(/.{1}$|^.{1}/g, '');
  135. optional = translation.optional;
  136. recursive = translation.recursive;
  137. if (recursive) {
  138. maskChunks.push(mask.charAt(i));
  139. oRecursive = {digit: mask.charAt(i), pattern: pattern};
  140. } else {
  141. maskChunks.push(!optional && !recursive ? pattern : (pattern + '?'));
  142. }
  143. } else {
  144. maskChunks.push(mask.charAt(i).replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'));
  145. }
  146. }
  147. r = maskChunks.join('');
  148. if (oRecursive) {
  149. r = r.replace(new RegExp('(' + oRecursive.digit + '(.*' + oRecursive.digit + ')?)'), '($1)?')
  150. .replace(new RegExp(oRecursive.digit, 'g'), oRecursive.pattern);
  151. }
  152. return new RegExp(r);
  153. },
  154. destroyEvents: function() {
  155. el.off(['input', 'keydown', 'keyup', 'paste', 'drop', 'blur', 'focusout', ''].join('.mask '));
  156. },
  157. val: function(v) {
  158. var isInput = el.is('input'),
  159. method = isInput ? 'val' : 'text',
  160. r;
  161. if (arguments.length > 0) {
  162. if (el[method]() !== v) {
  163. el[method](v);
  164. }
  165. r = el;
  166. } else {
  167. r = el[method]();
  168. }
  169. return r;
  170. },
  171. calculateCaretPosition: function() {
  172. var oldVal = el.data('mask-previus-value') || '',
  173. newVal = p.getMasked(),
  174. caretPosNew = p.getCaret();
  175. if (oldVal !== newVal) {
  176. var caretPosOld = el.data('mask-previus-caret-pos') || 0,
  177. newValL = newVal.length,
  178. oldValL = oldVal.length,
  179. maskDigitsBeforeCaret = 0,
  180. maskDigitsAfterCaret = 0,
  181. maskDigitsBeforeCaretAll = 0,
  182. maskDigitsBeforeCaretAllOld = 0,
  183. i = 0;
  184. for (i = caretPosNew; i < newValL; i++) {
  185. if (!p.maskDigitPosMap[i]) {
  186. break;
  187. }
  188. maskDigitsAfterCaret++;
  189. }
  190. for (i = caretPosNew - 1; i >= 0; i--) {
  191. if (!p.maskDigitPosMap[i]) {
  192. break;
  193. }
  194. maskDigitsBeforeCaret++;
  195. }
  196. for (i = caretPosNew - 1; i >= 0; i--) {
  197. if (p.maskDigitPosMap[i]) {
  198. maskDigitsBeforeCaretAll++;
  199. }
  200. }
  201. for (i = caretPosOld - 1; i >= 0; i--) {
  202. if (p.maskDigitPosMapOld[i]) {
  203. maskDigitsBeforeCaretAllOld++;
  204. }
  205. }
  206. if (caretPosNew > oldValL) {
  207. // if the cursor is at the end keep it there
  208. caretPosNew = newValL;
  209. }
  210. else if (caretPosOld >= caretPosNew && caretPosOld !== oldValL) {
  211. if (!p.maskDigitPosMapOld[caretPosNew]) {
  212. var caretPos = caretPosNew;
  213. caretPosNew -= maskDigitsBeforeCaretAllOld - maskDigitsBeforeCaretAll;
  214. caretPosNew -= maskDigitsBeforeCaret;
  215. if (p.maskDigitPosMap[caretPosNew]) {
  216. caretPosNew = caretPos;
  217. }
  218. }
  219. }
  220. else if (caretPosNew > caretPosOld) {
  221. caretPosNew += maskDigitsBeforeCaretAll - maskDigitsBeforeCaretAllOld;
  222. caretPosNew += maskDigitsAfterCaret;
  223. }
  224. }
  225. return caretPosNew;
  226. },
  227. behaviour: function(e) {
  228. e = e || window.event;
  229. p.invalid = [];
  230. var keyCode = el.data('mask-keycode');
  231. if ($.inArray(keyCode, jMask.byPassKeys) === -1) {
  232. var newVal = p.getMasked(),
  233. caretPos = p.getCaret();
  234. setTimeout(function() {
  235. p.setCaret(p.calculateCaretPosition());
  236. }, 10);
  237. p.val(newVal);
  238. p.setCaret(caretPos);
  239. return p.callbacks(e);
  240. }
  241. },
  242. getMasked: function(skipMaskChars, val) {
  243. var buf = [],
  244. value = val === undefined ? p.val() : val + '',
  245. m = 0, maskLen = mask.length,
  246. v = 0, valLen = value.length,
  247. offset = 1, addMethod = 'push',
  248. resetPos = -1,
  249. maskDigitCount = 0,
  250. maskDigitPosArr = [],
  251. lastMaskChar,
  252. check;
  253. if (options.reverse) {
  254. addMethod = 'unshift';
  255. offset = -1;
  256. lastMaskChar = 0;
  257. m = maskLen - 1;
  258. v = valLen - 1;
  259. check = function () {
  260. return m > -1 && v > -1;
  261. };
  262. } else {
  263. lastMaskChar = maskLen - 1;
  264. check = function () {
  265. return m < maskLen && v < valLen;
  266. };
  267. }
  268. var lastUntranslatedMaskChar;
  269. while (check()) {
  270. var maskDigit = mask.charAt(m),
  271. valDigit = value.charAt(v),
  272. translation = jMask.translation[maskDigit];
  273. if (translation) {
  274. if (valDigit.match(translation.pattern)) {
  275. buf[addMethod](valDigit);
  276. if (translation.recursive) {
  277. if (resetPos === -1) {
  278. resetPos = m;
  279. } else if (m === lastMaskChar) {
  280. m = resetPos - offset;
  281. }
  282. if (lastMaskChar === resetPos) {
  283. m -= offset;
  284. }
  285. }
  286. m += offset;
  287. } else if (valDigit === lastUntranslatedMaskChar) {
  288. // matched the last untranslated (raw) mask character that we encountered
  289. // likely an insert offset the mask character from the last entry; fall
  290. // through and only increment v
  291. maskDigitCount--;
  292. lastUntranslatedMaskChar = undefined;
  293. } else if (translation.optional) {
  294. m += offset;
  295. v -= offset;
  296. } else if (translation.fallback) {
  297. buf[addMethod](translation.fallback);
  298. m += offset;
  299. v -= offset;
  300. } else {
  301. p.invalid.push({p: v, v: valDigit, e: translation.pattern});
  302. }
  303. v += offset;
  304. } else {
  305. if (!skipMaskChars) {
  306. buf[addMethod](maskDigit);
  307. }
  308. if (valDigit === maskDigit) {
  309. maskDigitPosArr.push(v);
  310. v += offset;
  311. } else {
  312. lastUntranslatedMaskChar = maskDigit;
  313. maskDigitPosArr.push(v + maskDigitCount);
  314. maskDigitCount++;
  315. }
  316. m += offset;
  317. }
  318. }
  319. var lastMaskCharDigit = mask.charAt(lastMaskChar);
  320. if (maskLen === valLen + 1 && !jMask.translation[lastMaskCharDigit]) {
  321. buf.push(lastMaskCharDigit);
  322. }
  323. var newVal = buf.join('');
  324. p.mapMaskdigitPositions(newVal, maskDigitPosArr, valLen);
  325. return newVal;
  326. },
  327. mapMaskdigitPositions: function(newVal, maskDigitPosArr, valLen) {
  328. var maskDiff = options.reverse ? newVal.length - valLen : 0;
  329. p.maskDigitPosMap = {};
  330. for (var i = 0; i < maskDigitPosArr.length; i++) {
  331. p.maskDigitPosMap[maskDigitPosArr[i] + maskDiff] = 1;
  332. }
  333. },
  334. callbacks: function (e) {
  335. var val = p.val(),
  336. changed = val !== oldValue,
  337. defaultArgs = [val, e, el, options],
  338. callback = function(name, criteria, args) {
  339. if (typeof options[name] === 'function' && criteria) {
  340. options[name].apply(this, args);
  341. }
  342. };
  343. callback('onChange', changed === true, defaultArgs);
  344. callback('onKeyPress', changed === true, defaultArgs);
  345. callback('onComplete', val.length === mask.length, defaultArgs);
  346. callback('onInvalid', p.invalid.length > 0, [val, e, el, p.invalid, options]);
  347. }
  348. };
  349. el = $(el);
  350. var jMask = this, oldValue = p.val(), regexMask;
  351. mask = typeof mask === 'function' ? mask(p.val(), undefined, el, options) : mask;
  352. // public methods
  353. jMask.mask = mask;
  354. jMask.options = options;
  355. jMask.remove = function() {
  356. var caret = p.getCaret();
  357. p.destroyEvents();
  358. p.val(jMask.getCleanVal());
  359. p.setCaret(caret);
  360. return el;
  361. };
  362. // get value without mask
  363. jMask.getCleanVal = function() {
  364. return p.getMasked(true);
  365. };
  366. // get masked value without the value being in the input or element
  367. jMask.getMaskedVal = function(val) {
  368. return p.getMasked(false, val);
  369. };
  370. jMask.init = function(onlyMask) {
  371. onlyMask = onlyMask || false;
  372. options = options || {};
  373. jMask.clearIfNotMatch = $.jMaskGlobals.clearIfNotMatch;
  374. jMask.byPassKeys = $.jMaskGlobals.byPassKeys;
  375. jMask.translation = $.extend({}, $.jMaskGlobals.translation, options.translation);
  376. jMask = $.extend(true, {}, jMask, options);
  377. regexMask = p.getRegexMask();
  378. if (onlyMask) {
  379. p.events();
  380. p.val(p.getMasked());
  381. } else {
  382. if (options.placeholder) {
  383. el.attr('placeholder' , options.placeholder);
  384. }
  385. // this is necessary, otherwise if the user submit the form
  386. // and then press the "back" button, the autocomplete will erase
  387. // the data. Works fine on IE9+, FF, Opera, Safari.
  388. if (el.data('mask')) {
  389. el.attr('autocomplete', 'off');
  390. }
  391. // detect if is necessary let the user type freely.
  392. // for is a lot faster than forEach.
  393. for (var i = 0, maxlength = true; i < mask.length; i++) {
  394. var translation = jMask.translation[mask.charAt(i)];
  395. if (translation && translation.recursive) {
  396. maxlength = false;
  397. break;
  398. }
  399. }
  400. if (maxlength) {
  401. el.attr('maxlength', mask.length);
  402. }
  403. p.destroyEvents();
  404. p.events();
  405. var caret = p.getCaret();
  406. p.val(p.getMasked());
  407. p.setCaret(caret);
  408. }
  409. };
  410. jMask.init(!el.is('input'));
  411. };
  412. $.maskWatchers = {};
  413. var HTMLAttributes = function () {
  414. var input = $(this),
  415. options = {},
  416. prefix = 'data-mask-',
  417. mask = input.attr('data-mask');
  418. if (input.attr(prefix + 'reverse')) {
  419. options.reverse = true;
  420. }
  421. if (input.attr(prefix + 'clearifnotmatch')) {
  422. options.clearIfNotMatch = true;
  423. }
  424. if (input.attr(prefix + 'selectonfocus') === 'true') {
  425. options.selectOnFocus = true;
  426. }
  427. if (notSameMaskObject(input, mask, options)) {
  428. return input.data('mask', new Mask(this, mask, options));
  429. }
  430. },
  431. notSameMaskObject = function(field, mask, options) {
  432. options = options || {};
  433. var maskObject = $(field).data('mask'),
  434. stringify = JSON.stringify,
  435. value = $(field).val() || $(field).text();
  436. try {
  437. if (typeof mask === 'function') {
  438. mask = mask(value);
  439. }
  440. return typeof maskObject !== 'object' || stringify(maskObject.options) !== stringify(options) || maskObject.mask !== mask;
  441. } catch (e) {}
  442. },
  443. eventSupported = function(eventName) {
  444. var el = document.createElement('div'), isSupported;
  445. eventName = 'on' + eventName;
  446. isSupported = (eventName in el);
  447. if ( !isSupported ) {
  448. el.setAttribute(eventName, 'return;');
  449. isSupported = typeof el[eventName] === 'function';
  450. }
  451. el = null;
  452. return isSupported;
  453. };
  454. $.fn.mask = function(mask, options) {
  455. options = options || {};
  456. var selector = this.selector,
  457. globals = $.jMaskGlobals,
  458. interval = globals.watchInterval,
  459. watchInputs = options.watchInputs || globals.watchInputs,
  460. maskFunction = function() {
  461. if (notSameMaskObject(this, mask, options)) {
  462. return $(this).data('mask', new Mask(this, mask, options));
  463. }
  464. };
  465. $(this).each(maskFunction);
  466. if (selector && selector !== '' && watchInputs) {
  467. clearInterval($.maskWatchers[selector]);
  468. $.maskWatchers[selector] = setInterval(function(){
  469. $(document).find(selector).each(maskFunction);
  470. }, interval);
  471. }
  472. return this;
  473. };
  474. $.fn.masked = function(val) {
  475. return this.data('mask').getMaskedVal(val);
  476. };
  477. $.fn.unmask = function() {
  478. clearInterval($.maskWatchers[this.selector]);
  479. delete $.maskWatchers[this.selector];
  480. return this.each(function() {
  481. var dataMask = $(this).data('mask');
  482. if (dataMask) {
  483. dataMask.remove().removeData('mask');
  484. }
  485. });
  486. };
  487. $.fn.cleanVal = function() {
  488. return this.data('mask').getCleanVal();
  489. };
  490. $.applyDataMask = function(selector) {
  491. selector = selector || $.jMaskGlobals.maskElements;
  492. var $selector = (selector instanceof $) ? selector : $(selector);
  493. $selector.filter($.jMaskGlobals.dataMaskAttr).each(HTMLAttributes);
  494. };
  495. var globals = {
  496. maskElements: 'input,td,span,div',
  497. dataMaskAttr: '*[data-mask]',
  498. dataMask: true,
  499. watchInterval: 300,
  500. watchInputs: true,
  501. // old versions of chrome dont work great with input event
  502. useInput: !/Chrome\/[2-4][0-9]|SamsungBrowser/.test(window.navigator.userAgent) && eventSupported('input'),
  503. watchDataMask: false,
  504. byPassKeys: [9, 16, 17, 18, 36, 37, 38, 39, 40, 91],
  505. translation: {
  506. '0': {pattern: /\d/},
  507. '9': {pattern: /\d/, optional: true},
  508. '#': {pattern: /\d/, recursive: true},
  509. 'A': {pattern: /[a-zA-Z0-9]/},
  510. 'S': {pattern: /[a-zA-Z]/}
  511. }
  512. };
  513. $.jMaskGlobals = $.jMaskGlobals || {};
  514. globals = $.jMaskGlobals = $.extend(true, {}, globals, $.jMaskGlobals);
  515. // looking for inputs with data-mask attribute
  516. if (globals.dataMask) {
  517. $.applyDataMask();
  518. }
  519. setInterval(function() {
  520. if ($.jMaskGlobals.watchDataMask) {
  521. $.applyDataMask();
  522. }
  523. }, globals.watchInterval);
  524. }, window.jQuery, window.Zepto));