diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 3260eff..0000000 --- a/.gitignore +++ /dev/null @@ -1,3 +0,0 @@ - -.idea/* -dist/* diff --git a/README.md b/README.md index 64828ed..9c0919c 100644 --- a/README.md +++ b/README.md @@ -7,4 +7,38 @@ This is a masked input plugin for the jQuery javascript library. It allows a use * a - Represents an alpha character (A-Z,a-z) * 9 - Represents a numeric character (0-9) -* \* - Represents an alphanumeric character (A-Z,a-z,0-9) \ No newline at end of file +* \* - Represents an alphanumeric character (A-Z,a-z,0-9) + +autoMask (jQuery 1.7+) +-------- +By calling $( selector ).autoMask() once it reads the data-mask attribute and automatically set the specified mask to any input[type='text'], input[type='tel'] or input[type='number'] element inside the selector. +By adding new elements with a data-mask attribute and without value autoMask will bind the mask behavior to that element. +Example: +
+$(function() {
+	$( document ).autoMask();
+});
+
+//The mask will be 99/99/9999
+<input type="text" data-mask="99/99/9999" />
+
+//The mask will be +99 9999
+<input type="tel" data-mask="+99 9999" />
+
+//The mask will be 99 - 99
+<input type="number" data-mask="99 - 99" />
+
+ +You could also pass the options in the first argument. These options will be defined once and be valid to all the masks inside the selector. +Example: +
+$(function() {
+	$( document ).autoMask({
+		completed: function() {
+			alert("Alert executed after each mask has been completed");
+		}
+	});
+});
+
+ +autoMask does NOT support two or more instance in the same selector or in any of it's contents. \ No newline at end of file diff --git a/demo/datepicker.html b/demo/datepicker.html index 0b7ce77..39d4817 100644 --- a/demo/datepicker.html +++ b/demo/datepicker.html @@ -1,7 +1,7 @@ datepicker demo - + diff --git a/demo/index.html b/demo/index.html index c371c75..8197061 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,7 +1,7 @@ jQuery Mask Test - + - + @@ -46,6 +46,8 @@ + + diff --git a/src/jquery.maskedinput.js b/src/jquery.maskedinput.js index af67604..a97fac5 100644 --- a/src/jquery.maskedinput.js +++ b/src/jquery.maskedinput.js @@ -3,6 +3,10 @@ Copyright (c) 2007-@Year Josh Bush (digitalbush.com) Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) Version: @version + + Callbacks: + completed - Executes after the mask has been filled + afterBlur - Executes after the value has changed and the blur has occurred */ (function($) { var pasteEventName = ($.browser.msie ? 'paste' : 'input') + ".mask"; @@ -13,6 +17,7 @@ definitions: { '9': "[0-9]", 'a': "[A-Za-z]", + 'A': "[A-Z]", '*': "[A-Za-z0-9]" }, dataName:"rawMaskFn" @@ -22,6 +27,7 @@ //Helper Function for Caret positioning caret: function(begin, end) { if (this.length == 0) return; + if (this.is(":hidden")) return; //setSelectionRange fails if the element is hidden if (typeof begin == 'number') { end = (typeof end == 'number') ? end : begin; return this.each(function() { @@ -49,13 +55,19 @@ }, unmask: function() { return this.trigger("unmask"); }, mask: function(mask, settings) { - if (!mask && this.length > 0) { - var input = $(this[0]); - return input.data($.mask.dataName)(); + if (!mask) { + if(this.length > 0) { + var fn = $(this).data($.mask.dataName); + if($.isFunction(fn)) { + return fn(); + }; + } + return undefined; } settings = $.extend({ placeholder: "_", - completed: null + completed: null, + afterBlur: null }, settings); var defs = $.mask.definitions; @@ -173,6 +185,20 @@ return false; } }; + + function blurEvent(e) { + checkVal(); + + //if the value differs from original, triggers the change event + if (input.val() != focusText) { + input.change(); + } + + //if an afterBlur callback has been defined + if(settings.afterBlur) { + settings.afterBlur.call(input); + } + }; function clearBuffer(start, end) { for (var i = start; i < end && i < len; i++) { @@ -185,8 +211,7 @@ function checkVal(allow) { //try to place characters where they belong - var test = input.val(); - var lastMatch = -1; + var test = input.val(), lastMatch = -1; for (var i = 0, pos = 0; i < len; i++) { if (tests[i]) { buffer[i] = settings.placeholder; @@ -200,9 +225,13 @@ } if (pos > test.length) break; - } else if (buffer[i] == test.charAt(pos) && i!=partialPosition) { - pos++; - lastMatch = i; + } else if (i!=partialPosition) { + if(buffer[i] == test.charAt(pos)) { + pos++; + lastMatch = i; + } else { + lastMatch++; + } } } if (!allow && lastMatch + 1 < partialPosition) { @@ -240,11 +269,7 @@ }; ($.browser.msie ? moveCaret:function(){setTimeout(moveCaret,0)})(); }) - .bind("blur.mask", function() { - checkVal(); - if (input.val() != focusText) - input.change(); - }) + .bind("blur.mask", blurEvent) .bind("keydown.mask", keydownEvent) .bind("keypress.mask", keypressEvent) .bind(pasteEventName, function() { @@ -253,6 +278,29 @@ checkVal(); //Perform initial check for existing values }); + }, + + autoMask: function( options ) { + + var selector = [ getSelector("text"), getSelector("tel"), getSelector("number") ].join(", "); + var $context = $( this ); + + function getSelector( type ) { + return "input[type='" + type + "'][data-mask]"; + } + + function maskIt() { + var $input = $(this), + dataMask = $input.data("mask"); + + if( dataMask !== undefined && $input.mask() === undefined ) { + $input.mask( String(dataMask), options ); + } + } + + $context.find( selector ).each( maskIt ); + $context.off("focus.automask"); + return $context.on("focus.automask", selector, maskIt); } }); })(jQuery);