Skip to content
This repository was archived by the owner on Dec 11, 2017. It is now read-only.

Added "autoclear" setting so invalid values persist #183

Merged
digitalBush merged 6 commits into from
Nov 2, 2013
Merged

Added "autoclear" setting so invalid values persist #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0dea72e
Added "autoclear" setting so invalid values persist
gburghardt Oct 9, 2013
b9c0097
Fixing default mask display with "autoclear" set to false
gburghardt Oct 10, 2013
debc0d1
Adding demo with optional markers and autoclear=false
gburghardt Oct 31, 2013
2f518e6
Adding test coverage around masks with optional markers and autoclear…
gburghardt Oct 31, 2013
4c5253f
Merge remote-tracking branch 'upstream/master' into merge/autoclear_u…
gburghardt Oct 31, 2013
a4308ea
Rebuilding distribution files after merging from upsteam/master.
gburghardt Oct 31, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<head>
<title> jQuery Mask Test </title>
<script src="../lib/jquery-1.9.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../dist/jquery.maskedinput.min.js" type="text/javascript"></script>
<script src="../dist/jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$.mask.definitions['~'] = "[+-]";
Expand All @@ -15,15 +15,17 @@
$("#product").mask("a*-999-a999", { placeholder: " " });
$("#eyescript").mask("~9.99 ~9.99 999");
$("#po").mask("PO: aaa-999-***");
$("#pct").mask("99%");
$("#pct").mask("99%");
$("#phoneAutoclearFalse").mask("(999) 999-9999", { autoclear: false });
$("#phoneExtAutoclearFalse").mask("(999) 999-9999? x99999", { autoclear: false });

$("input").blur(function() {
$("#info").html("Unmasked value: " + $(this).mask());
}).dblclick(function() {
$(this).unmask();
});
});

</script>
</head>
<body>
Expand All @@ -38,6 +40,8 @@
<tr><td>Eye Script</td><td><input id="eyescript" type="text" tabindex="6"/></td><td>~9.99 ~9.99 999</td></tr>
<tr><td>Purchase Order</td><td><input id="po" type="text" tabindex="6"/></td><td>aaa-999-***</td></tr>
<tr><td>Percent</td><td><input id="pct" type="text" tabindex="6"/></td><td>99%</td></tr>
<tr><td>Phone (autoclear=false)</td><td><input id="phoneAutoclearFalse" type="text" tabindex="6"/></td><td>(999) 999-9999</td></tr>
<tr><td>Phone + Ext (autoclear=false)</td><td><input id="phoneExtAutoclearFalse" type="text" tabindex="6"/></td><td>(999) 999-9999? x99999</td></tr>
</table>
<div id="info"></div>
</body>
Expand Down
56 changes: 44 additions & 12 deletions dist/jquery.maskedinput.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,13 @@
var el = document.createElement('input'),
name = 'onpaste';
el.setAttribute(name, '');
return (typeof el[name] === 'function')?'paste':'input';
return (typeof el[name] === 'function')?'paste':'input';
}

var pasteEventName = getPasteEvent() + ".mask",
ua = navigator.userAgent,
iPhone = /iphone/i.test(ua),
chrome = /chrome/i.test(ua),
android=/android/i.test(ua),
caretTimeoutId;

Expand All @@ -25,6 +26,7 @@ $.mask = {
'a': "[A-Za-z]",
'*': "[A-Za-z0-9]"
},
autoclear: true,
dataName: "rawMaskFn",
placeholder: '_'
};
Expand Down Expand Up @@ -79,6 +81,7 @@ $.fn.extend({
return input.data($.mask.dataName)();
}
settings = $.extend({
autoclear: $.mask.autoclear,
placeholder: $.mask.placeholder, // Load default placeholder
completed: null
}, settings);
Expand Down Expand Up @@ -112,6 +115,7 @@ $.fn.extend({
return defs[c] ? settings.placeholder : c;
}
}),
defaultBuffer = buffer.join(''),
focusText = input.val();

function seekNext(pos) {
Expand Down Expand Up @@ -202,6 +206,22 @@ $.fn.extend({
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) {
Expand Down Expand Up @@ -251,7 +271,8 @@ $.fn.extend({
var test = input.val(),
lastMatch = -1,
i,
c;
c,
pos;

for (i = 0, pos = 0; i < len; i++) {
if (tests[i]) {
Expand All @@ -275,8 +296,16 @@ $.fn.extend({
if (allow) {
writeBuffer();
} else if (lastMatch + 1 < partialPosition) {
input.val("");
clearBuffer(0, len);
if (settings.autoclear || buffer.join('') === defaultBuffer) {
// Invalid value. Remove it and replace it with the
// mask, which is the default behavior.
input.val("");
clearBuffer(0, len);
} else {
// Invalid value, but we opt to show the value to the
// user and allow them to correct their mistake.
writeBuffer();
}
} else {
writeBuffer();
input.val(input.val().substring(0, lastMatch + 1));
Expand All @@ -299,12 +328,12 @@ $.fn.extend({
})
.bind("focus.mask", function() {
clearTimeout(caretTimeoutId);
var pos,
moveCaret;
var pos;

focusText = input.val();

pos = checkVal();

caretTimeoutId = setTimeout(function(){
writeBuffer();
if (pos == mask.length) {
Expand All @@ -316,23 +345,26 @@ $.fn.extend({
})
.bind("blur.mask", function() {
checkVal();

if (input.val() != focusText)
input.change();
})
.bind("keydown.mask", keydownEvent)
.bind("keypress.mask", keypressEvent)
.bind(pasteEventName, function() {
setTimeout(function() {
setTimeout(function() {
var pos=checkVal(true);
input.caret(pos);
input.caret(pos);
if (settings.completed && pos == input.val().length)
settings.completed.call(input);
}, 0);
});
checkVal(); //Perform initial check for existing values
if (chrome && android) {
input.bind("keyup.mask", keypressEvent);
}
checkVal(); //Perform initial check for existing values
});
}
});


})(jQuery);
})(jQuery);
2 changes: 1 addition & 1 deletion dist/jquery.maskedinput.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

80 changes: 80 additions & 0 deletions spec/Focus.Spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,24 @@ feature("Focusing A Masked Input",function(){
expect(error).toBeUndefined();
})
});

scenario("Mask contains a partial value with autoclear set to false",function(){
given("the input has a partial value",function(){
input.val("1");
});
given("a mask with two placeholders and autoclear=false",function(){
input.mask("99", { autoclear: false });
});
when("focusing on the input",function(){
input.focus();
});
then("the value should be partially filled out",function(){
expect(input).toHaveValue("1_");
});
then("the input partial value should remain",function(){
expect(input).toHaveValue("1_");
});
});
});

feature("Leaving A Masked Input",function(){
Expand All @@ -76,6 +94,20 @@ feature("Leaving A Masked Input",function(){
expect(input).toHaveValue("");
});
});

scenario("Empty placeholders remaining with autoclear set to false",function(){
given("a mask with two placeholders",function(){
input.mask("99", { autoclear: false });
});
when("typing one character and blurring",function(){
input.caret(0);
input.mashKeys("1")
input.blur();
});
then("value should remain visible with placeholders",function(){
expect(input).toHaveValue("1_");
});
});
});

feature("Optional marker",function(){
Expand All @@ -91,6 +123,18 @@ feature("Optional marker",function(){
});
});

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");
Expand All @@ -102,4 +146,40 @@ feature("Optional marker",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");
});
});
});
61 changes: 61 additions & 0 deletions spec/Init.Spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
feature("Initializing a Mask",function(){
scenario("An input with no value",function(){
given("an input with no value",function(){
input.val("");
});
when("setting a mask with two placeholders",function(){
input.mask("99");
});
then("the value should be an empty string",function(){
expect(input).toHaveValue("");
});
});

scenario("An input with a valid value and no placeholders remaining",function(){
given("an input with a valid value",function(){
input.val("5555555555");
});
when("setting a mask",function(){
input.mask("(999) 999-9999");
});
then("the value should be intact",function(){
expect(input).toHaveValue("(555) 555-5555");
});
});

scenario("An input with an invalid value and placeholders remaining",function(){
given("an invalid input value",function(){
input.val("55555555");
});
when("setting a mask",function(){
input.mask("(999) 999-9999");
});
then("the value should be empty",function(){
expect(input).toHaveValue("");
});
});

scenario("An input with an invalid value, placeholders remaining and autoclear set to false",function(){
given("an invalid input value",function(){
input.val("55555555");
});
when("setting a mask with autoclear set to false",function(){
input.mask("(999) 999-9999", { autoclear: false });
});
then("the value be intact with placeholders visible",function(){
expect(input).toHaveValue("(555) 555-55__");
});
});

scenario("An input no value and autoclear set to false", function() {
given("an input with no value",function(){
input.val("");
});
when("setting a mask with autoclear set to false",function(){
input.mask("(999) 999-9999", { autoclear: false });
});
then("the value should be empty",function(){
expect(input).toHaveValue("");
});
});
});
Loading