diff --git a/.gitignore b/.gitignore index 3175dd7..9bbba37 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ .idea/* node_modules/ +bower_components/ +dist/ diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..9e4605b --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,127 @@ +# Contributing + +Please take a moment to review this document in order to make the contribution +process easy and effective for everyone involved! + +## Using the issue tracker + +The issue tracker is for: +* [Bug Reports](#bug-reports) +* [Feature Requests](#feature-requests) +* [Submitting Pull Requests](#pull-requests) + +Please **do not** use the issue tracker for personal support requests. + +## Bug Reports + +A bug is a _demonstrable problem_ that is caused by the code in the repository. + +Guidelines for bug reports: + +1. **Use the GitHub issue search** — check if the issue has already been + reported. + +2. **Check if the issue has been fixed** — try to reproduce it using the + `master` branch in the repository. + +3. **Isolate and report the problem** — ideally create a reduced test + case or a small [jsfiddle](http://jsfiddle.net) showing the issue. + +Please try to be as detailed as possible in your report. Include information about +your operating system, browser, jQuery version, and masked input plugin version. +Please provide steps to reproduce the issue as well as the outcome you were expecting. + +## Feature Requests + +Feature requests are welcome. It's up to *you* to make a strong case of the merits of +this feature. Please provide as much detail and context as possible. + +Features that have a very narrow use case are unlikely to be accepted unless we +can come up with a way to come to a more general solution. Please don't let +that stop you from sharing your ideas, just keep that in mind. + +## Pull Requests + +Good pull requests are very helpful. They should remain focused +in scope and avoid containing unrelated commits. + +**IMPORTANT**: By submitting a patch, you agree that your work will be +licensed under the license used by the project. + +If you have any large pull request in mind (e.g. implementing features, +refactoring code, etc), **please ask first** otherwise you risk spending +a lot of time working on something that the project's developers might +not want to merge into the project. + +Please adhere to the coding conventions in the project (indentation, +accurate comments, etc.) and don't forget to add your own tests and +documentation. When working with git, we recommend the following process +in order to craft an excellent pull request: + +1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork, + and configure the remotes: + + ```bash + # Clone your fork of the repo into the current directory + git clone https://github.com//jquery.maskedinput + # Navigate to the newly cloned directory + cd jquery.maskedinput + # Assign the original repo to a remote called "upstream" + git remote add upstream https://github.com/digitalBush/jquery.maskedinput + ``` + +2. If you cloned a while ago, get the latest changes from upstream: + + ```bash + git checkout master + git pull upstream master + ``` + +3. Create a new topic branch (off of `master`) to contain your feature, change, + or fix. + + **IMPORTANT**: Making changes in `master` is discouraged. You should always + keep your local `master` in sync with upstream `master` and make your + changes in topic branches. + + ```bash + git checkout -b + ``` + +4. Commit your changes in logical chunks. Keep your commit messages organized, + with a short description in the first line and more detailed information on + the following lines. + + Please use git's + [interactive rebase](https://help.github.com/articles/interactive-rebase) + feature to tidy up your commits before making them public. Ideally when you + are finished you'll have a single commit. + +5. Make sure all the tests are still passing. + + ```bash + npm test + ``` + +6. Push your topic branch up to your fork: + + ```bash + git push origin + ``` + +7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) + with a clear title and description. + +8. If you haven't updated your pull request for a while, you should consider + rebasing on master and resolving any conflicts. + + **IMPORTANT**: _Never ever_ merge upstream `master` into your branches. You + should always `git rebase` on `master` to bring your changes up to date when + necessary. + + ```bash + git checkout master + git pull upstream master + git checkout + git rebase master + ``` diff --git a/LICENSE b/LICENSE index 8f4ccae..e6114e8 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright (c) 2007-2013 Josh Bush (digitalbush.com) +Copyright (c) 2007-2015 Josh Bush (digitalbush.com) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation @@ -19,4 +19,4 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -OTHER DEALINGS IN THE SOFTWARE. \ No newline at end of file +OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md index ac4c6c0..87889b9 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,12 @@ Masked Input Plugin for jQuery ============================== -[![Build Status](https://travis-ci.org/digitalBush/jquery.maskedinput.png)](https://travis-ci.org/digitalBush/jquery.maskedinput) +**Notice: This project is no longer being maintained.** + +I started this project [over 10 years ago](https://forum.jquery.com/topic/jquery-introduction-and-masked-input-plugin) to fill a need for a side project I was working on at the time. Nothing ever became of that side project, but this little plugin lived on. Over the years it brought me joy to stumble on sites using this thing. It was super encouraging to hear from people using it in their own products. I tried for a while to maintain it, even after I had moved away from front end web development. + +The time has come to officially call it quits. The web has changed(**A LOT**) and there are better things out there like [Cleave.js](https://nosir.github.io/cleave.js/). I'll leave this repo up for posterity in an archived state. Thank you to everyone who contributed to or used this plugin over the years. + + Overview -------- This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc). It has been tested on Internet Explorer, Firefox, Safari, Opera, and Chrome. A mask is defined by a format made up of mask literals and mask definitions. Any character not in the definitions list below is considered a mask literal. Mask literals will be automatically entered for the user as they type and will not be able to be removed by the user.The following mask definitions are predefined: @@ -9,21 +15,94 @@ This is a masked input plugin for the jQuery javascript library. It allows a use * 9 - Represents a numeric character (0-9) * \* - Represents an alphanumeric character (A-Z,a-z,0-9) -If your requirements aren't met by the predefined placeholders, you can always add your own. For example, maybe you need a mask to only allow hexadecimal characters. You can add your own definition for a placeholder, say 'h', like so: `$.mask.definitions['h'] = "[A-Fa-f0-9]";` Then you can use that to mask for something like css colors in hex with a mask "#hhhhhh". +### Usage +First, include the jQuery and masked input javascript files. + +```html + + +``` + +Next, call the mask function for those items you wish to have masked. + +```html +jQuery(function($){ + $("#date").mask("99/99/9999"); + $("#phone").mask("(999) 999-9999"); + $("#tin").mask("99-9999999"); + $("#ssn").mask("999-99-9999"); +}); +``` + +Optionally, if you are not satisfied with the underscore ('_') character as a placeholder, you may pass an optional argument to the maskedinput method. + +```html +jQuery(function($){ + $("#product").mask("99/99/9999",{placeholder:" "}); +}); +``` + +Optionally, if you would like to execute a function once the mask has been completed, you can specify that function as an optional argument to the maskedinput method. + +```html +jQuery(function($){ + $("#product").mask("99/99/9999",{completed:function(){alert("You typed the following: "+this.val());}}); +}); +``` + +Optionally, if you would like to disable the automatic discarding of the uncomplete input, you may pass an optional argument to the maskedinput method +```html +jQuery(function($){ + $("#product").mask("99/99/9999",{autoclear: false}); +}); +``` + +You can now supply your own mask definitions. +```html +jQuery(function($){ + $.mask.definitions['~']='[+-]'; + $("#eyescript").mask("~9.99 ~9.99 999"); +}); +``` + +You can have part of your mask be optional. Anything listed after '?' within the mask is considered optional user input. The common example for this is phone number + optional extension. + +```html +jQuery(function($){ + $("#phone").mask("(999) 999-9999? x99999"); +}); +``` + +If your requirements aren't met by the predefined placeholders, you can always add your own. For example, maybe you need a mask to only allow hexadecimal characters. You can add your own definition for a placeholder, say 'h', like so: `$.mask.definitions['h'] = "[A-Fa-f0-9]";` Then you can use that to mask for something like css colors in hex with a `mask "#hhhhhh"`. + +```html +jQuery(function($){ + $("#phone").mask("#hhhhhh"); +}); +``` + By design, this plugin will reject input which doesn't complete the mask. You can bypass this by using a '?' character at the position where you would like to consider input optional. For example, a mask of "(999) 999-9999? x99999" would require only the first 10 digits of a phone number with extension being optional. + +Getting the bits +---------------- +We generally recommend that you use [bower](http://bower.io) to install jquery.maskedinput plugin. + + $ bower install --save jquery.maskedinput + + Setting up your Developer Environment ------------------------------------- jQuery Masked Input uses [NodeJS](http://www.nodejs.org) and [GruntJS](http://www.gruntjs.com) as it's developer platform and build automation tool. To get your environment setup correctly, you'll need nodejs version 0.8.25 or greater installed. You'll also need to install the grunt command line tool: - $ sudo npm install -g grunt-cli + $ sudo npm install -g grunt-cli Once node is installed on your system all that you need to do is install the developer dependencies and run the grunt build: $ npm install $ grunt -All of the tests for jQuery Masked Input are run using the [jasmine](http://pivotal.github.io/jasmine/) test runner. +All of the tests for jQuery Masked Input are run using the [jasmine](http://jasmine.github.io/) test runner. diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..e6368cb --- /dev/null +++ b/bower.json @@ -0,0 +1,29 @@ +{ + "name": "jquery.maskedinput", + "homepage": "http://digitalbush.com/projects/masked-input-plugin/", + "authors": [ + "Josh Bush (digitalbush.com)" + ], + "description": "jQuery Masked Input Plugin", + "main": "./dist/jquery.maskedinput.js", + "moduleType": [ + "es6" + ], + "keywords": [ + "input", + "form", + "mask", + "jquery" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "spec", + "lib" + ], + "dependencies": { + "jquery": ">=1.8.3" + } +} diff --git a/demo/index.html b/demo/index.html index d297b1e..9788fc2 100644 --- a/demo/index.html +++ b/demo/index.html @@ -2,12 +2,12 @@ jQuery Mask Test - + $(function() { $.mask.definitions['~'] = "[+-]"; - $("#date").mask("99/99/9999",{completed:function(){alert("completed!");}}); - $("#phone").mask("(999) 999-9999"); + $("#date").mask("99/99/9999",{placeholder:"mm/dd/yyyy",completed:function(){alert("completed!");}}); + $(".phone").mask("(999) 999-9999"); $("#phoneExt").mask("(999) 999-9999? x99999"); $("#iphone").mask("+33 999 999 999"); $("#tin").mask("99-9999999"); @@ -31,7 +31,8 @@ - + + diff --git a/dist/jquery.maskedinput.js b/dist/jquery.maskedinput.js index 65ead0f..4ac3cfc 100644 --- a/dist/jquery.maskedinput.js +++ b/dist/jquery.maskedinput.js @@ -1,15 +1,13 @@ /* jQuery Masked Input Plugin - Copyright (c) 2007 - 2013 Josh Bush (digitalbush.com) + Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com) Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) - Version: 1.3.1 + Version: 1.4.1 */ -!function($) { - function getPasteEvent() { - var el = document.createElement("input"), name = "onpaste"; - return el.setAttribute(name, ""), "function" == typeof el[name] ? "paste" : "input"; - } - var caretTimeoutId, pasteEventName = getPasteEvent() + ".mask", ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua); +!function(factory) { + "function" == typeof define && define.amd ? define([ "jquery" ], factory) : factory("object" == typeof exports ? require("jquery") : jQuery); +}(function($) { + var caretTimeoutId, ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), android = /android/i.test(ua); $.mask = { definitions: { "9": "[0-9]", @@ -38,16 +36,30 @@ return this.trigger("unmask"); }, mask: function(mask, settings) { - var input, defs, tests, partialPosition, firstNonMaskPos, len; - return !mask && this.length > 0 ? (input = $(this[0]), input.data($.mask.dataName)()) : (settings = $.extend({ + var input, defs, tests, partialPosition, firstNonMaskPos, lastRequiredNonMaskPos, len, oldVal; + if (!mask && this.length > 0) { + input = $(this[0]); + var fn = input.data($.mask.dataName); + return fn ? fn() : void 0; + } + return settings = $.extend({ autoclear: $.mask.autoclear, placeholder: $.mask.placeholder, completed: null }, settings), defs = $.mask.definitions, tests = [], partialPosition = len = mask.length, firstNonMaskPos = null, $.each(mask.split(""), function(i, c) { "?" == c ? (len--, partialPosition = i) : defs[c] ? (tests.push(new RegExp(defs[c])), - null === firstNonMaskPos && (firstNonMaskPos = tests.length - 1)) : tests.push(null); + null === firstNonMaskPos && (firstNonMaskPos = tests.length - 1), partialPosition > i && (lastRequiredNonMaskPos = tests.length - 1)) : tests.push(null); }), this.trigger("unmask").each(function() { + function tryFireCompleted() { + if (settings.completed) { + for (var i = firstNonMaskPos; lastRequiredNonMaskPos >= i; i++) if (tests[i] && buffer[i] === getPlaceholder(i)) return; + settings.completed.call(input); + } + } + function getPlaceholder(i) { + return settings.placeholder.charAt(i < settings.placeholder.length ? i : 0); + } function seekNext(pos) { for (;++pos < len && !tests[pos]; ) ; return pos; @@ -61,43 +73,64 @@ if (!(0 > begin)) { for (i = begin, j = seekNext(end); len > i; i++) if (tests[i]) { if (!(len > j && tests[i].test(buffer[j]))) break; - buffer[i] = buffer[j], buffer[j] = settings.placeholder, j = seekNext(j); + buffer[i] = buffer[j], buffer[j] = getPlaceholder(j), j = seekNext(j); } writeBuffer(), input.caret(Math.max(firstNonMaskPos, begin)); } } function shiftR(pos) { var i, c, j, t; - for (i = pos, c = settings.placeholder; len > i; i++) if (tests[i]) { + for (i = pos, c = getPlaceholder(pos); len > i; i++) if (tests[i]) { if (j = seekNext(i), t = buffer[i], buffer[i] = c, !(len > j && tests[j].test(t))) break; c = t; } } + function androidInputEvent() { + var curVal = input.val(), pos = input.caret(); + if (oldVal && oldVal.length && oldVal.length > curVal.length) { + for (checkVal(!0); pos.begin > 0 && !tests[pos.begin - 1]; ) pos.begin--; + if (0 === pos.begin) for (;pos.begin < firstNonMaskPos && !tests[pos.begin]; ) pos.begin++; + input.caret(pos.begin, pos.begin); + } else { + for (checkVal(!0); pos.begin < len && !tests[pos.begin]; ) pos.begin++; + input.caret(pos.begin, pos.begin); + } + tryFireCompleted(); + } + function blurEvent() { + checkVal(), input.val() != focusText && input.change(); + } function keydownEvent(e) { - var pos, begin, end, k = e.which; - 8 === k || 46 === k || iPhone && 127 === k ? (pos = input.caret(), begin = pos.begin, - end = pos.end, 0 === end - begin && (begin = 46 !== k ? seekPrev(begin) : end = seekNext(begin - 1), - end = 46 === k ? seekNext(end) : end), clearBuffer(begin, end), shiftL(begin, end - 1), - e.preventDefault()) : 27 == k && (input.val(focusText), input.caret(0, checkVal()), - e.preventDefault()); + if (!input.prop("readonly")) { + var pos, begin, end, k = e.which || e.keyCode; + oldVal = input.val(), 8 === k || 46 === k || iPhone && 127 === k ? (pos = input.caret(), + begin = pos.begin, end = pos.end, end - begin === 0 && (begin = 46 !== k ? seekPrev(begin) : end = seekNext(begin - 1), + end = 46 === k ? seekNext(end) : end), clearBuffer(begin, end), shiftL(begin, end - 1), + e.preventDefault()) : 13 === k ? blurEvent.call(this, e) : 27 === k && (input.val(focusText), + input.caret(0, checkVal()), e.preventDefault()); + } } function keypressEvent(e) { - var p, c, next, k = e.which, pos = input.caret(); - if (0 == k) { - if (pos.begin >= len) return input.val(input.val().substr(0, len)), e.preventDefault(), - !1; - pos.begin == pos.end && (k = input.val().charCodeAt(pos.begin - 1), pos.begin--, - pos.end--); + if (!input.prop("readonly")) { + var p, c, next, k = e.which || e.keyCode, pos = input.caret(); + if (!(e.ctrlKey || e.altKey || e.metaKey || 32 > k) && k && 13 !== k) { + if (pos.end - pos.begin !== 0 && (clearBuffer(pos.begin, pos.end), shiftL(pos.begin, pos.end - 1)), + p = seekNext(pos.begin - 1), len > p && (c = String.fromCharCode(k), tests[p].test(c))) { + if (shiftR(p), buffer[p] = c, writeBuffer(), next = seekNext(p), android) { + var proxy = function() { + $.proxy($.fn.caret, input, next)(); + }; + setTimeout(proxy, 0); + } else input.caret(next); + pos.begin <= lastRequiredNonMaskPos && tryFireCompleted(); + } + e.preventDefault(); + } } - e.ctrlKey || e.altKey || e.metaKey || 32 > k || k && (0 !== pos.end - pos.begin && (clearBuffer(pos.begin, pos.end), - shiftL(pos.begin, pos.end - 1)), p = seekNext(pos.begin - 1), len > p && (c = String.fromCharCode(k), - tests[p].test(c) && (shiftR(p), buffer[p] = c, writeBuffer(), next = seekNext(p), - android ? setTimeout($.proxy($.fn.caret, input, next), 0) : input.caret(next), settings.completed && next >= len && settings.completed.call(input))), - e.preventDefault()); } function clearBuffer(start, end) { var i; - for (i = start; end > i && len > i; i++) tests[i] && (buffer[i] = settings.placeholder); + for (i = start; end > i && len > i; i++) tests[i] && (buffer[i] = getPlaceholder(i)); } function writeBuffer() { input.val(buffer.join("")); @@ -105,41 +138,45 @@ function checkVal(allow) { var i, c, pos, test = input.val(), lastMatch = -1; for (i = 0, pos = 0; len > i; i++) if (tests[i]) { - for (buffer[i] = settings.placeholder; pos++ < test.length; ) if (c = test.charAt(pos - 1), + for (buffer[i] = getPlaceholder(i); pos++ < test.length; ) if (c = test.charAt(pos - 1), tests[i].test(c)) { buffer[i] = c, lastMatch = i; break; } - if (pos > test.length) break; - } else buffer[i] === test.charAt(pos) && i !== partialPosition && (pos++, lastMatch = i); - return allow ? writeBuffer() : partialPosition > lastMatch + 1 ? settings.autoclear || buffer.join("") === defaultBuffer ? (input.val(""), + if (pos > test.length) { + clearBuffer(i + 1, len); + break; + } + } else buffer[i] === test.charAt(pos) && pos++, partialPosition > i && (lastMatch = i); + return allow ? writeBuffer() : partialPosition > lastMatch + 1 ? settings.autoclear || buffer.join("") === defaultBuffer ? (input.val() && input.val(""), clearBuffer(0, len)) : writeBuffer() : (writeBuffer(), input.val(input.val().substring(0, lastMatch + 1))), partialPosition ? i : firstNonMaskPos; } - var input = $(this), buffer = $.map(mask.split(""), function(c) { - return "?" != c ? defs[c] ? settings.placeholder : c : void 0; + var input = $(this), buffer = $.map(mask.split(""), function(c, i) { + return "?" != c ? defs[c] ? getPlaceholder(i) : c : void 0; }), defaultBuffer = buffer.join(""), focusText = input.val(); input.data($.mask.dataName, function() { return $.map(buffer, function(c, i) { - return tests[i] && c != settings.placeholder ? c : null; + return tests[i] && c != getPlaceholder(i) ? c : null; }).join(""); - }), input.attr("readonly") || input.one("unmask", function() { - input.unbind(".mask").removeData($.mask.dataName); - }).bind("focus.mask", function() { - clearTimeout(caretTimeoutId); - var pos; - focusText = input.val(), pos = checkVal(), caretTimeoutId = setTimeout(function() { - writeBuffer(), pos == mask.length ? input.caret(0, pos) : input.caret(pos); - }, 10); - }).bind("blur.mask", function() { - checkVal(), input.val() != focusText && input.change(); - }).bind("keydown.mask", keydownEvent).bind("keypress.mask", keypressEvent).bind(pasteEventName, function() { - setTimeout(function() { + }), input.one("unmask", function() { + input.off(".mask").removeData($.mask.dataName); + }).on("focus.mask", function() { + if (!input.prop("readonly")) { + clearTimeout(caretTimeoutId); + var pos; + focusText = input.val(), pos = checkVal(), caretTimeoutId = setTimeout(function() { + input.get(0) === document.activeElement && (writeBuffer(), pos == mask.replace("?", "").length ? input.caret(0, pos) : input.caret(pos)); + }, 10); + } + }).on("blur.mask", blurEvent).on("keydown.mask", keydownEvent).on("keypress.mask", keypressEvent).on("input.mask paste.mask", function() { + input.prop("readonly") || setTimeout(function() { var pos = checkVal(!0); - input.caret(pos), settings.completed && pos == input.val().length && settings.completed.call(input); + input.caret(pos), tryFireCompleted(); }, 0); - }), chrome && android && input.bind("keyup.mask", keypressEvent), checkVal(); - })); + }), chrome && android && input.off("input.mask").on("input.mask", androidInputEvent), + checkVal(); + }); } }); -}(jQuery); \ No newline at end of file +}); \ No newline at end of file diff --git a/dist/jquery.maskedinput.min.js b/dist/jquery.maskedinput.min.js index ff8a5e5..d4dfd01 100644 --- a/dist/jquery.maskedinput.min.js +++ b/dist/jquery.maskedinput.min.js @@ -1,7 +1,7 @@ /* jQuery Masked Input Plugin - Copyright (c) 2007 - 2013 Josh Bush (digitalbush.com) + Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com) Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) - Version: 1.3.1 + Version: 1.4.1 */ -!function(a){function b(){var a=document.createElement("input"),b="onpaste";return a.setAttribute(b,""),"function"==typeof a[b]?"paste":"input"}var c,d=b()+".mask",e=navigator.userAgent,f=/iphone/i.test(e),g=/chrome/i.test(e),h=/android/i.test(e);a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},a.fn.extend({caret:function(a,b){var c;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof a?(b="number"==typeof b?b:a,this.each(function(){this.setSelectionRange?this.setSelectionRange(a,b):this.createTextRange&&(c=this.createTextRange(),c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select())})):(this[0].setSelectionRange?(a=this[0].selectionStart,b=this[0].selectionEnd):document.selection&&document.selection.createRange&&(c=document.selection.createRange(),a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length),{begin:a,end:b})},unmask:function(){return this.trigger("unmask")},mask:function(b,e){var i,j,k,l,m,n;return!b&&this.length>0?(i=a(this[0]),i.data(a.mask.dataName)()):(e=a.extend({autoclear:a.mask.autoclear,placeholder:a.mask.placeholder,completed:null},e),j=a.mask.definitions,k=[],l=n=b.length,m=null,a.each(b.split(""),function(a,b){"?"==b?(n--,l=a):j[b]?(k.push(new RegExp(j[b])),null===m&&(m=k.length-1)):k.push(null)}),this.trigger("unmask").each(function(){function i(a){for(;++a=0&&!k[a];);return a}function p(a,b){var c,d;if(!(0>a)){for(c=a,d=i(b);n>c;c++)if(k[c]){if(!(n>d&&k[c].test(x[d])))break;x[c]=x[d],x[d]=e.placeholder,d=i(d)}u(),w.caret(Math.max(m,a))}}function q(a){var b,c,d,f;for(b=a,c=e.placeholder;n>b;b++)if(k[b]){if(d=i(b),f=x[b],x[b]=c,!(n>d&&k[d].test(f)))break;c=f}}function r(a){var b,c,d,e=a.which;8===e||46===e||f&&127===e?(b=w.caret(),c=b.begin,d=b.end,0===d-c&&(c=46!==e?o(c):d=i(c-1),d=46===e?i(d):d),t(c,d),p(c,d-1),a.preventDefault()):27==e&&(w.val(z),w.caret(0,v()),a.preventDefault())}function s(b){var c,d,f,g=b.which,j=w.caret();if(0==g){if(j.begin>=n)return w.val(w.val().substr(0,n)),b.preventDefault(),!1;j.begin==j.end&&(g=w.val().charCodeAt(j.begin-1),j.begin--,j.end--)}b.ctrlKey||b.altKey||b.metaKey||32>g||g&&(0!==j.end-j.begin&&(t(j.begin,j.end),p(j.begin,j.end-1)),c=i(j.begin-1),n>c&&(d=String.fromCharCode(g),k[c].test(d)&&(q(c),x[c]=d,u(),f=i(c),h?setTimeout(a.proxy(a.fn.caret,w,f),0):w.caret(f),e.completed&&f>=n&&e.completed.call(w))),b.preventDefault())}function t(a,b){var c;for(c=a;b>c&&n>c;c++)k[c]&&(x[c]=e.placeholder)}function u(){w.val(x.join(""))}function v(a){var b,c,d,f=w.val(),g=-1;for(b=0,d=0;n>b;b++)if(k[b]){for(x[b]=e.placeholder;d++f.length)break}else x[b]===f.charAt(d)&&b!==l&&(d++,g=b);return a?u():l>g+1?e.autoclear||x.join("")===y?(w.val(""),t(0,n)):u():(u(),w.val(w.val().substring(0,g+1))),l?b:m}var w=a(this),x=a.map(b.split(""),function(a){return"?"!=a?j[a]?e.placeholder:a:void 0}),y=x.join(""),z=w.val();w.data(a.mask.dataName,function(){return a.map(x,function(a,b){return k[b]&&a!=e.placeholder?a:null}).join("")}),w.attr("readonly")||w.one("unmask",function(){w.unbind(".mask").removeData(a.mask.dataName)}).bind("focus.mask",function(){clearTimeout(c);var a;z=w.val(),a=v(),c=setTimeout(function(){u(),a==b.length?w.caret(0,a):w.caret(a)},10)}).bind("blur.mask",function(){v(),w.val()!=z&&w.change()}).bind("keydown.mask",r).bind("keypress.mask",s).bind(d,function(){setTimeout(function(){var a=v(!0);w.caret(a),e.completed&&a==w.val().length&&e.completed.call(w)},0)}),g&&h&&w.bind("keyup.mask",s),v()}))}})}(jQuery); \ No newline at end of file +!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):a("object"==typeof exports?require("jquery"):jQuery)}(function(a){var b,c=navigator.userAgent,d=/iphone/i.test(c),e=/chrome/i.test(c),f=/android/i.test(c);a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},autoclear:!0,dataName:"rawMaskFn",placeholder:"_"},a.fn.extend({caret:function(a,b){var c;if(0!==this.length&&!this.is(":hidden"))return"number"==typeof a?(b="number"==typeof b?b:a,this.each(function(){this.setSelectionRange?this.setSelectionRange(a,b):this.createTextRange&&(c=this.createTextRange(),c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select())})):(this[0].setSelectionRange?(a=this[0].selectionStart,b=this[0].selectionEnd):document.selection&&document.selection.createRange&&(c=document.selection.createRange(),a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length),{begin:a,end:b})},unmask:function(){return this.trigger("unmask")},mask:function(c,g){var h,i,j,k,l,m,n,o;if(!c&&this.length>0){h=a(this[0]);var p=h.data(a.mask.dataName);return p?p():void 0}return g=a.extend({autoclear:a.mask.autoclear,placeholder:a.mask.placeholder,completed:null},g),i=a.mask.definitions,j=[],k=n=c.length,l=null,a.each(c.split(""),function(a,b){"?"==b?(n--,k=a):i[b]?(j.push(new RegExp(i[b])),null===l&&(l=j.length-1),k>a&&(m=j.length-1)):j.push(null)}),this.trigger("unmask").each(function(){function h(){if(g.completed){for(var a=l;m>=a;a++)if(j[a]&&C[a]===p(a))return;g.completed.call(B)}}function p(a){return g.placeholder.charAt(a=0&&!j[a];);return a}function s(a,b){var c,d;if(!(0>a)){for(c=a,d=q(b);n>c;c++)if(j[c]){if(!(n>d&&j[c].test(C[d])))break;C[c]=C[d],C[d]=p(d),d=q(d)}z(),B.caret(Math.max(l,a))}}function t(a){var b,c,d,e;for(b=a,c=p(a);n>b;b++)if(j[b]){if(d=q(b),e=C[b],C[b]=c,!(n>d&&j[d].test(e)))break;c=e}}function u(){var a=B.val(),b=B.caret();if(o&&o.length&&o.length>a.length){for(A(!0);b.begin>0&&!j[b.begin-1];)b.begin--;if(0===b.begin)for(;b.beging)&&g&&13!==g){if(i.end-i.begin!==0&&(y(i.begin,i.end),s(i.begin,i.end-1)),c=q(i.begin-1),n>c&&(d=String.fromCharCode(g),j[c].test(d))){if(t(c),C[c]=d,z(),e=q(c),f){var k=function(){a.proxy(a.fn.caret,B,e)()};setTimeout(k,0)}else B.caret(e);i.begin<=m&&h()}b.preventDefault()}}}function y(a,b){var c;for(c=a;b>c&&n>c;c++)j[c]&&(C[c]=p(c))}function z(){B.val(C.join(""))}function A(a){var b,c,d,e=B.val(),f=-1;for(b=0,d=0;n>b;b++)if(j[b]){for(C[b]=p(b);d++e.length){y(b+1,n);break}}else C[b]===e.charAt(d)&&d++,k>b&&(f=b);return a?z():k>f+1?g.autoclear||C.join("")===D?(B.val()&&B.val(""),y(0,n)):z():(z(),B.val(B.val().substring(0,f+1))),k?b:l}var B=a(this),C=a.map(c.split(""),function(a,b){return"?"!=a?i[a]?p(b):a:void 0}),D=C.join(""),E=B.val();B.data(a.mask.dataName,function(){return a.map(C,function(a,b){return j[b]&&a!=p(b)?a:null}).join("")}),B.one("unmask",function(){B.off(".mask").removeData(a.mask.dataName)}).on("focus.mask",function(){if(!B.prop("readonly")){clearTimeout(b);var a;E=B.val(),a=A(),b=setTimeout(function(){B.get(0)===document.activeElement&&(z(),a==c.replace("?","").length?B.caret(0,a):B.caret(a))},10)}}).on("blur.mask",v).on("keydown.mask",w).on("keypress.mask",x).on("input.mask paste.mask",function(){B.prop("readonly")||setTimeout(function(){var a=A(!0);B.caret(a),h()},0)}),e&&f&&B.off("input.mask").on("input.mask",u),A()})}})}); \ No newline at end of file diff --git a/gruntfile.js b/gruntfile.js index 5896f86..5b22eac 100644 --- a/gruntfile.js +++ b/gruntfile.js @@ -43,12 +43,20 @@ module.exports = function( grunt ) { ] } } + }, + nugetpack: { + dist: { + src: 'jquery.maskedinput.nuspec', + dest: 'dist/' + } } }); grunt.loadNpmTasks("grunt-contrib-jasmine"); grunt.loadNpmTasks("grunt-contrib-uglify"); + grunt.loadNpmTasks('grunt-nuget'); grunt.registerTask('test', ['jasmine']); + grunt.registerTask('pack', ['default','nugetpack']); grunt.registerTask('default', ['test', 'uglify']); }; diff --git a/jquery.maskedinput.nuspec b/jquery.maskedinput.nuspec new file mode 100644 index 0000000..9e88140 --- /dev/null +++ b/jquery.maskedinput.nuspec @@ -0,0 +1,21 @@ + + + + jQuery.MaskedInput + 1.4.1.0 + digitalBush + stimms + https://github.com/digitalBush/jquery.maskedinput/blob/master/LICENSE + http://digitalbush.com/projects/masked-input-plugin/ + false + A jQuery plugin which applies a mask to input boxes to provide both a UI hint for users as well as some rudimentary input checking. + jQuery,plugins + + + + + + + + + diff --git a/maskedinput.jquery.json b/maskedinput.jquery.json deleted file mode 100644 index c44ab46..0000000 --- a/maskedinput.jquery.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "name": "maskedinput", - "title": "jQuery Masked Input", - "description": "jQuery plugin for forcing fixed width inputs to follow a certain patern.", - "keywords": ["input", "form", "mask"], - "version": "1.3.1", - "author": { - "name": "Josh Bush", - "url": "http://digitalbush.com" - }, - "licenses": [ - { - "type": "MIT", - "url": "https://raw.github.com/digitalBush/jquery.maskedinput/master/LICENSE" - } - ], - "bugs": "https://github.com/digitalBush/jquery.maskedinput/issues", - "homepage": "http://digitalbush.com/projects/masked-input-plugin/", - "docs": "http://digitalbush.com/projects/masked-input-plugin/#usage", - "dependencies": { - "jquery": ">=1.5" - } -} \ No newline at end of file diff --git a/package.json b/package.json index 2f8f240..8c65c9b 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { "name": "jquery.maskedinput", - "version": "1.3.1", + "version": "1.4.1", "author": "Josh Bush (digitalbush.com)", "description": "jQuery Masked Input Plugin", - "devDependencies": { "grunt": "0.4.x", "grunt-contrib-jasmine": "0.5.x", + "grunt-contrib-uglify": "0.2.x", "grunt-contrib-watch": "0.5.x", - "grunt-contrib-uglify": "0.2.x" + "grunt-nuget": "^0.1.4" }, "scripts": { "test": "grunt test" diff --git a/plugin.json b/plugin.json deleted file mode 100644 index e2aa63d..0000000 --- a/plugin.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "name" : "jquery.maskedinput", - "author" : "Josh Bush (digitalbush.com)", - "version" : "1.3.1" -} diff --git a/spec/Completed.Spec.js b/spec/Completed.Spec.js new file mode 100644 index 0000000..be71e62 --- /dev/null +++ b/spec/Completed.Spec.js @@ -0,0 +1,122 @@ +feature("Completed callback", function() { + scenario('Completing mask by typing last character',function(){ + var completed=false; + given("an input with a completed callback", function(){ + input.mask("99",{completed:function(){completed=true;}}); + }); + + when("typing left to right",function(){ + input.mashKeys("12"); + }); + + then("completed callback should be called",function(){ + expect(completed).toBeTruthy(); + }); + then("value should be correct",function(){ + expect(input).toHaveValue('12'); + }); + }); + + scenario('Completing mask by typing first character',function(){ + var completed=false; + given("an input with a completed callback", function(){ + input.val("12").mask("99",{completed:function(){completed=true;}}); + }); + + when("replacing first character value",function(){ + input + .caret(1) + .mashKeys(function(keys){keys.type(keys.backspace)}) + .mashKeys("3"); + }); + + then("completed callback should be called",function(){ + expect(completed).toBeTruthy(); + }); + + then("value should be correct",function(){ + expect(input).toHaveValue('32'); + }); + }); + + scenario('Typing last character of incomplete mask',function(){ + var completed=false; + given("an input with a completed callback", function(){ + input + .mask("99",{completed:function(){completed=true;}}) + .mashKeys("1") + .mashKeys(function(keys){keys.type(keys.backspace)}); + }); + + when("moving cursor to last position and typing",function(){ + input.caret(1).mashKeys("5"); + }); + + then("completed callback should not be called",function(){ + expect(completed).toBeFalsy(); + }); + + then("value should be correct",function(){ + expect(input).toHaveValue('_5'); + }); + + }); + + scenario('Typing last character of required portion of mask containing optional',function(){ + var completed=false; + given("an input with a completed callback", function(){ + input.mask("99?99",{completed:function(){completed=true;}}); + }); + + when("typing left to right",function(){ + input.mashKeys("12"); + }); + + then("completed callback should be called",function(){ + expect(completed).toBeTruthy(); + }); + + then("value should be correct",function(){ + expect(input).toHaveValue('12__'); + }); + }); + + scenario('Typing all characters of required portion of mask containing optional',function(){ + var completedCount=0; + given("an input with a completed callback", function(){ + input.mask("99?99",{completed:function(){completedCount++;}}); + }); + + when("typing left to right",function(){ + input.mashKeys("1234"); + }); + + then("completed callback should be called",function(){ + expect(completedCount).toEqual(1); + }); + + then("value should be correct",function(){ + expect(input).toHaveValue('1234'); + }); + }); + + scenario('Completing mask by typing last character with literal to right',function(){ + var completed=false; + given("an input with a completed callback", function(){ + input.mask("99!",{completed:function(){completed=true;}}); + }); + + when("typing left to right",function(){ + input.mashKeys("12"); + }); + + then("completed callback should be called",function(){ + expect(completed).toBeTruthy(); + }); + then("value should be correct",function(){ + expect(input).toHaveValue('12!'); + }); + }); + + +}); diff --git a/spec/Focus.Spec.js b/spec/Focus.Spec.js index 9964893..4e5743e 100644 --- a/spec/Focus.Spec.js +++ b/spec/Focus.Spec.js @@ -35,6 +35,34 @@ feature("Focusing A Masked Input",function(){ }); }); + scenario("Mask starts with a literal that fits first placeholder",function(){ + given("a mask beginning with a literal",function(){ + input.mask("19").focus(); + }); + waits(20); + when("blurring",function(){ + input.blur(); + }); + waits(20); + then("input value should be correct",function(){ + expect(input).toHaveValue(''); + }); + }); + + scenario("Mask starts with a literal that fits first placeholder and autoclear set to false",function(){ + given("a mask beginning with a literal",function(){ + input.mask("?19",{autoclear: false}).focus(); + }); + waits(20); + when("blurring",function(){ + input.blur(); + }); + waits(20); + then("input value should be correct",function(){ + expect(input).toHaveValue(''); + }); + }); + scenario("Masking a hidden input",function(){ var error; $(window).on("error.test",function(err){error=err;}) @@ -113,6 +141,18 @@ feature("Leaving A Masked Input",function(){ }); }); + scenario("Mask ending in literal",function(){ + given("a mask ending in a literal",function(){ + input.mask("99!"); + }); + when("typing two characters and blurring",function(){ + input.mashKeys("12").blur(); + }); + then("value should remain",function(){ + expect(input).toHaveValue("12!"); + }); + }); + scenario("Empty placeholders remaining with autoclear set to false",function(){ given("a mask with two placeholders",function(){ input.mask("99", { autoclear: false }); @@ -126,78 +166,21 @@ feature("Leaving A Masked Input",function(){ expect(input).toHaveValue("1_"); }); }); -}); -feature("Optional marker",function(){ - scenario("Placeholders not filled to marker",function(){ - given("a mask with an optional marker",function(){ - input.mask("99?99"); - }); - when("typing one character and leaving",function(){ - input.mashKeys("1").blur(); - }); - then("value should be empty",function(){ - expect(input).toHaveValue(""); + scenario("Shifts characters left on blur with autoclear false",function(){ + given("a mask with 10 placeholders",function(){ + input.mask("(999) 999-9999", { autoclear: false }); }); - }); - - scenario("Placeholders not filled to marker and autoclear = false", function() { - given("a mask with an optional marker",function(){ - input.mask("99?99", { autoclear: false }); - }); - when("typing one character and leaving",function(){ - input.mashKeys("1").blur(); - }); - then("value should be empty",function(){ - expect(input).toHaveValue("1___"); - }); - }); - - scenario("Placeholders filled to marker",function(){ - given("a mask with an optional marker",function(){ - input.mask("99?99"); - }); - when("typing two characters and leaving",function(){ - input.mashKeys("12").blur(); - }); - then("value should remain",function(){ - expect(input).toHaveValue("12"); - }); - }); - - scenario("Placeholders filled to marker and autoclear = false", function() { - given("a mask with an optional marker",function(){ - input.mask("99?99", { autoclear: false }); - }); - when("typing two characters and leaving",function(){ - input.mashKeys("12").blur(); - }); - then("value should remain",function(){ - expect(input).toHaveValue("12"); - }); - }); - - scenario("Placeholders filled, one marker filled, and autoclear = false", function() { - given("a mask with an optional marker",function(){ - input.mask("99?99", { autoclear: false }); - }); - when("typing three characters and leaving",function(){ - input.mashKeys("123").blur(); - }); - then("value should remain",function(){ - expect(input).toHaveValue("123"); - }); - }); - - scenario("Placeholders and markers filled, and autoclear = false", function() { - given("a mask with an optional marker",function(){ - input.mask("99?99", { autoclear: false }); + when("focusing input",function(){ + input.focus(); }); - when("typing four characters and leaving",function(){ - input.mashKeys("1234").blur(); + waits(20); + when("typing characters at the end of the mask and blurring",function(){ + input.caret(12); + input.mashKeys("44").blur(); }); - then("value should remain",function(){ - expect(input).toHaveValue("1234"); + then("characters should shift left to beginning of mask",function(){ + expect(input).toHaveValue("(44_) ___-____"); }); }); }); diff --git a/spec/Init.Spec.js b/spec/Init.Spec.js index 0bd7dea..e53cfe8 100644 --- a/spec/Init.Spec.js +++ b/spec/Init.Spec.js @@ -23,6 +23,18 @@ feature("Initializing a Mask",function(){ }); }); + scenario("An input with a valid value ending in a literal",function(){ + given("an input with a valid value",function(){ + input.val("12"); + }); + when("setting a mask",function(){ + input.mask("(99)"); + }); + then("the value should be intact",function(){ + expect(input).toHaveValue("(12)"); + }); + }); + scenario("An input with an invalid value and placeholders remaining",function(){ given("an invalid input value",function(){ input.val("55555555"); diff --git a/spec/Optional.Spec.js b/spec/Optional.Spec.js new file mode 100644 index 0000000..83e14ae --- /dev/null +++ b/spec/Optional.Spec.js @@ -0,0 +1,85 @@ +feature("Optional marker",function(){ + scenario("Placeholders not filled to marker",function(){ + given("a mask with an optional marker",function(){ + input.mask("99?99"); + }); + when("typing one character and leaving",function(){ + input.mashKeys("1").blur(); + }); + then("value should be empty",function(){ + expect(input).toHaveValue(""); + }); + }); + + scenario("Placeholders not filled to marker and autoclear = false", function() { + given("a mask with an optional marker",function(){ + input.mask("99?99", { autoclear: false }); + }); + when("typing one character and leaving",function(){ + input.mashKeys("1").blur(); + }); + then("value should be empty",function(){ + expect(input).toHaveValue("1___"); + }); + }); + + scenario("Placeholders filled to marker",function(){ + given("a mask with an optional marker",function(){ + input.mask("99?99"); + }); + when("typing two characters and leaving",function(){ + input.mashKeys("12").blur(); + }); + then("value should remain",function(){ + expect(input).toHaveValue("12"); + }); + }); + + scenario("Placeholders filled to marker with literals after",function(){ + given("a mask with an optional marker and literals",function(){ + input.mask("99!? x 99"); + }); + when("typing two characters and leaving",function(){ + input.mashKeys("12").blur(); + }); + then("value should remain",function(){ + expect(input).toHaveValue("12!"); + }); + }); + + scenario("Placeholders filled to marker and autoclear = false", function() { + given("a mask with an optional marker",function(){ + input.mask("99?99", { autoclear: false }); + }); + when("typing two characters and leaving",function(){ + input.mashKeys("12").blur(); + }); + then("value should remain",function(){ + expect(input).toHaveValue("12"); + }); + }); + + scenario("Placeholders filled, one marker filled, and autoclear = false", function() { + given("a mask with an optional marker",function(){ + input.mask("99?99", { autoclear: false }); + }); + when("typing three characters and leaving",function(){ + input.mashKeys("123").blur(); + }); + then("value should remain",function(){ + expect(input).toHaveValue("123"); + }); + }); + + scenario("Placeholders and markers filled, and autoclear = false", function() { + given("a mask with an optional marker",function(){ + input.mask("99?99", { autoclear: false }); + }); + when("typing four characters and leaving",function(){ + input.mashKeys("1234").blur(); + }); + then("value should remain",function(){ + expect(input).toHaveValue("1234"); + }); + }); +}); diff --git a/spec/Placeholder.spec.js b/spec/Placeholder.spec.js new file mode 100644 index 0000000..8bf5f0f --- /dev/null +++ b/spec/Placeholder.spec.js @@ -0,0 +1,27 @@ +feature("Multiple character placeholders",function(){ + scenario("Focusing",function(){ + given("a mask beginning with multi character placeholder",function(){ + input.mask("99/9999",{placeholder:"mm/yyyy"}); + }); + when("focusing",function(){ + input.focus(); + }); + waits(20); + then("placeholder text should be correct",function(){ + expect(input).toHaveValue('mm/yyyy'); + }); + }); + + scenario("Typing",function(){ + given("a mask beginning with multi character placeholder",function(){ + input.mask("99/9999",{placeholder:"mm/yyyy"}); + }); + when("typing",function(){ + input.mashKeys("12"); + }); + waits(20); + then("placeholder text should be correct",function(){ + expect(input).toHaveValue('12/yyyy'); + }); + }); +}); diff --git a/spec/Raw.Spec.js b/spec/Raw.Spec.js index 97be1f8..52a3ed7 100644 --- a/spec/Raw.Spec.js +++ b/spec/Raw.Spec.js @@ -54,6 +54,17 @@ feature("Getting raw value",function(){ expect(input.mask()).toEqual("12"); }); }); + + scenario("Verify if the input hasn't the mask bound through the raw value", function() { + given("an input without a mask", function() { + input + .mask("9/9-9_9").unmask(); + }); + + then("The raw value should be undefined and no error must occur", function() { + expect(input.mask()).toBe(undefined); + }); + }); }); feature("Getting raw value with autoclear set to false", function() { @@ -136,4 +147,4 @@ feature("Getting raw value with autoclear set to false", function() { expect(input.mask()).toEqual("1"); }); }); -}); \ No newline at end of file +}); diff --git a/spec/Readonly.Spec.js b/spec/Readonly.Spec.js new file mode 100644 index 0000000..6f37d1f --- /dev/null +++ b/spec/Readonly.Spec.js @@ -0,0 +1,16 @@ +feature("Readonly Inputs", function() { + scenario('Typing',function(){ + + given("a input with readonly added after mask", function(){ + input.mask("99").attr("readonly",true); + }); + + when("typing left to right",function(){ + input.mashKeys("12"); + }); + + then("Input should be ignored",function(){ + expect(input).toHaveValue(""); + }); + }); +}); diff --git a/spec/lib/jquery.keymasher.js b/spec/lib/jquery.keymasher.js index d8d9df5..bb430f6 100644 --- a/spec/lib/jquery.keymasher.js +++ b/spec/lib/jquery.keymasher.js @@ -1,23 +1,23 @@ /* Key Masher plugin for jQuery (https://github.com/digitalBush/jquery.keymasher) - Copyright (c) 2010-2013 Josh Bush (digitalbush.com) + Copyright (c) 2010-2014 Josh Bush (digitalbush.com) Licensed under the MIT license - Version: 0.3 + Version: 0.4 */ (function($,undefined){ //numberPad={'0':96,'1':97,'2':98,'3':99,'4':100,'5':101,'6':102,'7':103,'8':104,'9':105,'*':106,'+':107,'-':109,'.':110,'/':111}, - + var keys=(function(){ var defs={}, - keys = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890`-=[]\\;',./ \t\n", + keys = "ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890`-=[]\\;',./ \t\n\r", shifted = "abcdefghijklmnopqrstuvwxyz!@#$%^&*()~_+{}|:\"<>?", noprint={shift:16,ctrl:17,meta:91,alt:18,f1:112,f2:113,f3:114,f4:115,f5:116,f6:117,f7:118,f8:119,f9:120,f10:121,f11:122,f12:123, capslock:20,numlock:144,scrolllock:145,pageup:33,pagedown:34,end:35,home:36,backspace:8, insert:45, 'delete':46,pause:19,esc:27,left:37,up:38,right:39,down:40,printscreen:44}; $.each(keys.split(''),function(index,value){ - var keyCode=value.charCodeAt(0),shift=shifted[index]; + var keyCode=value.charCodeAt(0),shift=shifted[index]; defs[value]={keyCode:keyCode,charCode:keyCode,shift:shift}; if(shift) defs[shift]={keyCode:keyCode,charCode:shift.charCodeAt(0),shift:value,requiresShift:index>=26}; @@ -29,39 +29,39 @@ var KeyMasher=function(elm){ var modifierState={alt: false, ctrl: false, meta: false, shift: false}, forced={}; - + var queueModifierEvent=function(direction,modifier,isForced){ forced[modifier]=isForced; - modifierState[modifier]=(direction=='down'); + modifierState[modifier]=(direction=='down'); var event=$.extend($.Event(), modifierState, {type:'key'+direction, keyCode: keys[modifier].keyCode, charCode: 0}); elm.trigger(event); }; - + var queueStroke=function(key){ if($.type(key)==='string') - key=keys[key]; + key=keys[key]; if(key.requiresShift && !modifierState.shift) queueModifierEvent('down','shift',true); else if(modifierState.shift && key.shift) key=keys[key.shift]; - + var ignore = !key.charCode || modifierState.alt || modifierState.ctrl || modifierState.meta, down = $.extend($.Event('keydown'), modifierState, {keyCode: key.keyCode, charCode: 0, which:key.keyCode}), press = $.extend($.Event('keypress'), modifierState, {keyCode: key.charCode, charCode: key.charCode, which: key.charCode}), - up = $.extend($.Event('keyup'), modifierState, {keyCode: key.keyCode, charCode: 0, which:key.keyCode}); - + up = $.extend($.Event('keyup'), modifierState, {keyCode: key.keyCode, charCode: 0, which:key.keyCode}); + elm.trigger(down); if(!down.isDefaultPrevented() && !ignore){ elm.trigger(press); - if(!press.isDefaultPrevented()){ + if(!press.isDefaultPrevented() && !elm.prop("readonly")){ //need to do caret positioning elm.val(elm.val()+String.fromCharCode(key.charCode)); } } elm.trigger(up); - + if(forced.shift) - queueModifierEvent('up','shift'); + queueModifierEvent('up','shift'); }; var public={ @@ -71,13 +71,13 @@ public.type(typing); $.each(toks,function(index,value){queueModifierEvent('up',value);}); return public; - }, + }, type:function(){ $.each(arguments,function(index,typing){ if($.type(typing)==='string') $.each(typing.split(''),function(index,value){queueStroke(value);}); else - queueStroke(typing); + queueStroke(typing); }); return public; } @@ -91,7 +91,7 @@ fn=function(keys){keys.type(typing)}; } return this.each(function(){ - fn(KeyMasher($(this))); + fn(KeyMasher($(this))); }); }; -})(jQuery); \ No newline at end of file +})(jQuery); diff --git a/src/jquery.maskedinput.js b/src/jquery.maskedinput.js index ad999e3..d0f8a2d 100644 --- a/src/jquery.maskedinput.js +++ b/src/jquery.maskedinput.js @@ -1,17 +1,20 @@ -(function($) { - -function getPasteEvent() { - var el = document.createElement('input'), - name = 'onpaste'; - el.setAttribute(name, ''); - return (typeof el[name] === 'function')?'paste':'input'; -} - -var pasteEventName = getPasteEvent() + ".mask", - ua = navigator.userAgent, +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS + factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + +var ua = navigator.userAgent, iPhone = /iphone/i.test(ua), chrome = /chrome/i.test(ua), - android=/android/i.test(ua), + android = /android/i.test(ua), caretTimeoutId; $.mask = { @@ -31,7 +34,7 @@ $.fn.extend({ caret: function(begin, end) { var range; - if (this.length === 0 || this.is(":hidden")) { + if (this.length === 0 || this.is(":hidden") || this.get(0) !== document.activeElement) { return; } @@ -69,12 +72,16 @@ $.fn.extend({ tests, partialPosition, firstNonMaskPos, - len; + lastRequiredNonMaskPos, + len, + oldVal; if (!mask && this.length > 0) { input = $(this[0]); - return input.data($.mask.dataName)(); + var fn = input.data($.mask.dataName) + return fn?fn():undefined; } + settings = $.extend({ autoclear: $.mask.autoclear, placeholder: $.mask.placeholder, // Load default placeholder @@ -87,6 +94,8 @@ $.fn.extend({ partialPosition = len = mask.length; firstNonMaskPos = null; + mask = String(mask); + $.each(mask.split(""), function(i, c) { if (c == '?') { len--; @@ -96,6 +105,9 @@ $.fn.extend({ if (firstNonMaskPos === null) { firstNonMaskPos = tests.length - 1; } + if(i < partialPosition){ + lastRequiredNonMaskPos = tests.length - 1; + } } else { tests.push(null); } @@ -104,15 +116,34 @@ $.fn.extend({ return this.trigger("unmask").each(function() { var input = $(this), buffer = $.map( - mask.split(""), - function(c, i) { - if (c != '?') { - return defs[c] ? settings.placeholder : c; - } - }), + mask.split(""), + function(c, i) { + if (c != '?') { + return defs[c] ? getPlaceholder(i) : c; + } + }), defaultBuffer = buffer.join(''), focusText = input.val(); + function tryFireCompleted(){ + if (!settings.completed) { + return; + } + + for (var i = firstNonMaskPos; i <= lastRequiredNonMaskPos; i++) { + if (tests[i] && buffer[i] === getPlaceholder(i)) { + return; + } + } + settings.completed.call(input); + } + + function getPlaceholder(i){ + if(i < settings.placeholder.length) + return settings.placeholder.charAt(i); + return settings.placeholder.charAt(0); + } + function seekNext(pos) { while (++pos < len && !tests[pos]); return pos; @@ -135,7 +166,7 @@ $.fn.extend({ if (tests[i]) { if (j < len && tests[i].test(buffer[j])) { buffer[i] = buffer[j]; - buffer[j] = settings.placeholder; + buffer[j] = getPlaceholder(j); } else { break; } @@ -153,7 +184,7 @@ $.fn.extend({ j, t; - for (i = pos, c = settings.placeholder; i < len; i++) { + for (i = pos, c = getPlaceholder(pos); i < len; i++) { if (tests[i]) { j = seekNext(i); t = buffer[i]; @@ -167,19 +198,58 @@ $.fn.extend({ } } - function blurEvent(e) { - checkVal(); + function androidInputEvent(e) { + var curVal = input.val(); + var pos = input.caret(); + if (oldVal && oldVal.length && oldVal.length > curVal.length ) { + // a deletion or backspace happened + checkVal(true); + while (pos.begin > 0 && !tests[pos.begin-1]) + pos.begin--; + if (pos.begin === 0) + { + while (pos.begin < firstNonMaskPos && !tests[pos.begin]) + pos.begin++; + } + input.caret(pos.begin,pos.begin); + } else { + var pos2 = checkVal(true); + var lastEnteredValue = curVal.charAt(pos.begin); + if (pos.begin < len){ + if(!tests[pos.begin]){ + pos.begin++; + if(tests[pos.begin].test(lastEnteredValue)){ + pos.begin++; + } + }else{ + if(tests[pos.begin].test(lastEnteredValue)){ + pos.begin++; + } + } + } + input.caret(pos.begin,pos.begin); + } + tryFireCompleted(); + } + - if (input.val() != focusText) - input.change(); - } + function blurEvent(e) { + checkVal(); + + if (input.val() != focusText) + input.change(); + } function keydownEvent(e) { - var k = e.which, + if (input.prop("readonly")){ + return; + } + + var k = e.which || e.keyCode, pos, begin, end; - + oldVal = input.val(); //backspace, delete, and escape get special treatment if (k === 8 || k === 46 || (iPhone && k === 127)) { pos = input.caret(); @@ -204,29 +274,16 @@ $.fn.extend({ } function keypressEvent(e) { - var k = e.which, + if (input.prop("readonly")){ + return; + } + + var k = e.which || e.keyCode, pos = input.caret(), p, c, next; - if (k == 0) { - // unable to detect key pressed. Grab it from pos and adjust - // this is a failsafe for mobile chrome - // which can't detect keypress events - // reliably - if (pos.begin >= len) { - input.val(input.val().substr(0, len)); - e.preventDefault(); - return false; - } - if (pos.begin == pos.end) { - k = input.val().charCodeAt(pos.begin - 1); - pos.begin--; - pos.end--; - } - } - if (e.ctrlKey || e.altKey || e.metaKey || k < 32) {//Ignore return; } else if ( k && k !== 13 ) { @@ -255,10 +312,9 @@ $.fn.extend({ }else{ input.caret(next); } - - if (settings.completed && next >= len) { - settings.completed.call(input); - } + if(pos.begin <= lastRequiredNonMaskPos){ + tryFireCompleted(); + } } } e.preventDefault(); @@ -269,7 +325,7 @@ $.fn.extend({ var i; for (i = start; i < end && i < len; i++) { if (tests[i]) { - buffer[i] = settings.placeholder; + buffer[i] = getPlaceholder(i); } } } @@ -286,7 +342,7 @@ $.fn.extend({ for (i = 0, pos = 0; i < len; i++) { if (tests[i]) { - buffer[i] = settings.placeholder; + buffer[i] = getPlaceholder(i); while (pos++ < test.length) { c = test.charAt(pos - 1); if (tests[i].test(c)) { @@ -296,11 +352,16 @@ $.fn.extend({ } } if (pos > test.length) { + clearBuffer(i + 1, len); break; } - } else if (buffer[i] === test.charAt(pos) && i !== partialPosition) { - pos++; - lastMatch = i; + } else { + if (buffer[i] === test.charAt(pos)) { + pos++; + } + if( i < partialPosition){ + lastMatch = i; + } } } if (allow) { @@ -325,18 +386,22 @@ $.fn.extend({ input.data($.mask.dataName,function(){ return $.map(buffer, function(c, i) { - return tests[i]&&c!=settings.placeholder ? c : null; + return tests[i]&&c!=getPlaceholder(i) ? c : null; }).join(''); }); - if (!input.attr("readonly")) - input + + input .one("unmask", function() { input .off(".mask") .removeData($.mask.dataName); }) .on("focus.mask", function() { + if (input.prop("readonly")){ + return; + } + clearTimeout(caretTimeoutId); var pos; @@ -345,6 +410,9 @@ $.fn.extend({ pos = checkVal(); caretTimeoutId = setTimeout(function(){ + if(input.get(0) !== document.activeElement){ + return; + } writeBuffer(); if (pos == mask.replace("?","").length) { input.caret(0, pos); @@ -356,19 +424,25 @@ $.fn.extend({ .on("blur.mask", blurEvent) .on("keydown.mask", keydownEvent) .on("keypress.mask", keypressEvent) - .on(pasteEventName, function() { + .on("input.mask paste.mask", function() { + if (input.prop("readonly")){ + return; + } + setTimeout(function() { var pos=checkVal(true); input.caret(pos); - if (settings.completed && pos == input.val().length) - settings.completed.call(input); + tryFireCompleted(); }, 0); }); - if (chrome && android) { - input.on("keyup.mask", keypressEvent); + if (chrome && android) + { + input + .off('input.mask') + .on('input.mask', androidInputEvent); } checkVal(); //Perform initial check for existing values }); } }); -})(jQuery); +}));
Date99/99/9999
Phone(999) 999-9999
Phone(999) 999-9999
Phone(Readonly)(999) 999-9999
Phone + Ext(999) 999-9999? x99999
Int'l Phone+33 999 999 999
Tax ID99-9999999