From 4a2272e55c3a2e53a8fd96a4cda8bb9aa2fec8be Mon Sep 17 00:00:00 2001 From: Keith Carangelo Date: Thu, 15 Sep 2016 10:23:00 -0400 Subject: [PATCH] Do not display mask delimiters until they are reached if placeholder is set to the empty string. --- demo/index.html | 2 +- dist/jquery.maskedinput.js | 21 ++++++----- dist/jquery.maskedinput.min.js | 4 +- spec/NoPlaceholder.Spec.js | 67 ++++++++++++++++++++++++++++++++++ src/jquery.maskedinput.js | 10 ++++- 5 files changed, 91 insertions(+), 13 deletions(-) create mode 100644 spec/NoPlaceholder.Spec.js diff --git a/demo/index.html b/demo/index.html index 9788fc2..41393ba 100644 --- a/demo/index.html +++ b/demo/index.html @@ -11,7 +11,7 @@ $("#phoneExt").mask("(999) 999-9999? x99999"); $("#iphone").mask("+33 999 999 999"); $("#tin").mask("99-9999999"); - $("#ssn").mask("999-99-9999"); + $("#ssn").mask("999-99-9999", { placeholder: "" }); $("#product").mask("a*-999-a999", { placeholder: " " }); $("#eyescript").mask("~9.99 ~9.99 999"); $("#po").mask("PO: aaa-999-***"); diff --git a/dist/jquery.maskedinput.js b/dist/jquery.maskedinput.js index 4ac3cfc..b860e12 100644 --- a/dist/jquery.maskedinput.js +++ b/dist/jquery.maskedinput.js @@ -1,6 +1,6 @@ /* jQuery Masked Input Plugin - Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com) + Copyright (c) 2007 - 2016 Josh Bush (digitalbush.com) Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) Version: 1.4.1 */ @@ -20,7 +20,7 @@ }, $.fn.extend({ caret: function(begin, end) { var range; - if (0 !== this.length && !this.is(":hidden")) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin, + if (0 !== this.length && !this.is(":hidden") && this.get(0) === document.activeElement) return "number" == typeof begin ? (end = "number" == typeof end ? end : begin, this.each(function() { this.setSelectionRange ? this.setSelectionRange(begin, end) : this.createTextRange && (range = this.createTextRange(), range.collapse(!0), range.moveEnd("character", end), range.moveStart("character", begin), @@ -47,7 +47,7 @@ placeholder: $.mask.placeholder, completed: null }, settings), defs = $.mask.definitions, tests = [], partialPosition = len = mask.length, - firstNonMaskPos = null, $.each(mask.split(""), function(i, c) { + firstNonMaskPos = null, mask = String(mask), $.each(mask.split(""), function(i, c) { "?" == c ? (len--, partialPosition = i) : defs[c] ? (tests.push(new RegExp(defs[c])), null === firstNonMaskPos && (firstNonMaskPos = tests.length - 1), partialPosition > i && (lastRequiredNonMaskPos = tests.length - 1)) : tests.push(null); }), this.trigger("unmask").each(function() { @@ -58,7 +58,7 @@ } } function getPlaceholder(i) { - return settings.placeholder.charAt(i < settings.placeholder.length ? i : 0); + return i < settings.placeholder.length ? settings.placeholder.charAt(i) : settings.placeholder.charAt(0); } function seekNext(pos) { for (;++pos < len && !tests[pos]; ) ; @@ -85,19 +85,20 @@ c = t; } } - function androidInputEvent() { + function androidInputEvent(e) { 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); + var lastEnteredValue = (checkVal(!0), curVal.charAt(pos.begin)); + pos.begin < len && (tests[pos.begin] ? tests[pos.begin].test(lastEnteredValue) && pos.begin++ : (pos.begin++, + tests[pos.begin].test(lastEnteredValue) && pos.begin++)), input.caret(pos.begin, pos.begin); } tryFireCompleted(); } - function blurEvent() { + function blurEvent(e) { checkVal(), input.val() != focusText && input.change(); } function keydownEvent(e) { @@ -133,7 +134,9 @@ for (i = start; end > i && len > i; i++) tests[i] && (buffer[i] = getPlaceholder(i)); } function writeBuffer() { - input.val(buffer.join("")); + for (var i = 0, val = ""; i < buffer.length && "" !== buffer[i]; ) val += buffer[i], + i++; + input.val(val); } function checkVal(allow) { var i, c, pos, test = input.val(), lastMatch = -1; diff --git a/dist/jquery.maskedinput.min.js b/dist/jquery.maskedinput.min.js index d4dfd01..3aedac1 100644 --- a/dist/jquery.maskedinput.min.js +++ b/dist/jquery.maskedinput.min.js @@ -1,7 +1,7 @@ /* jQuery Masked Input Plugin - Copyright (c) 2007 - 2015 Josh Bush (digitalbush.com) + Copyright (c) 2007 - 2016 Josh Bush (digitalbush.com) Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license) Version: 1.4.1 */ -!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 +!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")&&this.get(0)===document.activeElement)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,c=String(c),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 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(a){var b=B.val(),c=B.caret();if(o&&o.length&&o.length>b.length){for(A(!0);c.begin>0&&!j[c.begin-1];)c.begin--;if(0===c.begin)for(;c.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(){for(var a=0,b="";ab;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/spec/NoPlaceholder.Spec.js b/spec/NoPlaceholder.Spec.js new file mode 100644 index 0000000..1772b85 --- /dev/null +++ b/spec/NoPlaceholder.Spec.js @@ -0,0 +1,67 @@ +feature("No placeholder defined",function(){ + scenario("Focusing",function(){ + given("a mask with delimiters but an empty placeholder",function(){ + input.mask("99-9999999",{placeholder:""}); + }); + when("focusing",function(){ + input.focus(); + }); + waits(20); + then("No mask delimiters are shown until necessary",function(){ + expect(input).toHaveValue(''); + }); + }); + + scenario("Typing",function(){ + given("a mask with delimiters, empty placeholder",function(){ + input.mask("99-9999999",{placeholder:""}); + }); + when("typing",function(){ + input.mashKeys("1"); + }); + waits(20); + then("delimiter should not display until necessary",function(){ + expect(input).toHaveValue('1'); + }); + }); + + scenario("Typing",function(){ + given("a mask with delimiters, empty placeholder",function(){ + input.mask("99-9999999",{placeholder:""}); + }); + when("typing",function(){ + input.mashKeys("12"); + }); + waits(20); + then("delimiter should display when necessary",function(){ + expect(input).toHaveValue('12-'); + }); + }); + + scenario("Focusing",function(){ + given("a mask with starting delimiter but an empty placeholder",function(){ + input.mask("(999) 999-9999",{placeholder:""}); + }); + when("focusing",function(){ + input.focus(); + }); + waits(20); + then("Only first delimiter character shown",function(){ + expect(input).toHaveValue('('); + }); + }); + + scenario("Typing",function(){ + given("a mask with delimiters, empty placeholder",function(){ + input.mask("(999) 999-9999",{placeholder:""}); + }); + when("typing",function(){ + input.mashKeys("617868"); + }); + waits(20); + then("delimiter should not display until necessary",function(){ + expect(input).toHaveValue('(617) 868-'); + }); + }); + +}); diff --git a/src/jquery.maskedinput.js b/src/jquery.maskedinput.js index d0f8a2d..72af6b6 100644 --- a/src/jquery.maskedinput.js +++ b/src/jquery.maskedinput.js @@ -330,7 +330,15 @@ $.fn.extend({ } } - function writeBuffer() { input.val(buffer.join('')); } + function writeBuffer() { + var i = 0; + var val = ''; + while (i < buffer.length && buffer[i] !== '') { + val += buffer[i]; + i++; + } + input.val( val ); + } function checkVal(allow) { //try to place characters where they belong