Skip to content

Commit e59b0bc

Browse files
committed
Mask: clearEmpty option
1 parent 9a1bcc5 commit e59b0bc

File tree

4 files changed

+47
-10
lines changed

4 files changed

+47
-10
lines changed

tests/unit/mask/mask_defaults.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
commonWidgetTests( "mask", {
22
defaults: {
3+
clearEmpty: true,
34
definitions: {
45
'9': /[0-9]/,
56
'a': /[A-Za-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]/,

tests/unit/mask/mask_events.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,10 @@ test( "complete: Complete event fires when typing last character of mask", funct
3939
});
4040

4141
asyncTest( "focus: Initial Caret Positioning", function() {
42-
var input = $( "#mask1" ).val("").mask({ mask: "9" }),
42+
var input = $( "#mask1" ).val("").mask({
43+
mask: "9",
44+
clearEmpty: false
45+
}),
4346
mask = input.data( "mask" );
4447

4548
equal( input.val(), "_", "Initial Value Expected" );
@@ -224,7 +227,10 @@ test( "keydown: escape returns to original value", function() {
224227

225228
test( "keypress: typing behaviors", function() {
226229
expect( 8 );
227-
var input = $( "#mask1" ).mask({ mask: "9-9" }),
230+
var input = $( "#mask1" ).mask({
231+
mask: "9-9",
232+
clearEmpty: false
233+
}),
228234
mask = input.data( "mask" );
229235

230236
input.focus();

tests/unit/mask/mask_options.js

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,30 @@
22

33
module( "mask: options" );
44

5+
test( "clearEmpty", function() {
6+
expect( 4 );
7+
var input = $( "#mask1" ).val("").mask({
8+
mask: "99/99/99",
9+
placeholder: "_",
10+
clearEmpty: true
11+
}),
12+
mask = input.data( "mask" );
13+
14+
equal( input.val(), "", "Empty value with clearEmpty displays no mask" );
15+
input.focus();
16+
equal( input.val(), "__/__/__", "Empty value with clearEmpty & element focus displays mask" );
17+
input.blur();
18+
equal( input.val(), "", "Empty value with clearEmpty displays no mask after blur" );
19+
input.mask( "option", "clearEmpty", false );
20+
equal( input.val(), "__/__/__", "Disabling clearEmpty displays mask" );
21+
});
22+
523
test( "placeholder", function() {
624
expect( 2 );
725
var input = $( "#mask1" ).mask({
826
mask: "99/99/99",
9-
placeholder: "_"
27+
placeholder: "_",
28+
clearEmpty: false
1029
});
1130

1231
equal( input.val(), "__/__/__", "Initial value" );

ui/jquery.ui.mask.js

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ $.widget( "ui.mask", {
2020
version: "@VERSION",
2121
defaultElement: "<input>",
2222
options: {
23+
clearEmpty: true,
2324
definitions: {
2425
'9': /[0-9]/,
2526
'a': /[A-Za-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]/,
@@ -60,11 +61,8 @@ $.widget( "ui.mask", {
6061
if ( key === "mask" ) {
6162
this._parseMask();
6263
this._parseValue();
63-
this._paint();
64-
}
65-
if ( key === "placeholder" ) {
66-
this._paint();
6764
}
65+
this._paint();
6866
},
6967

7068
// helper function to get or set position of text cursor (caret)
@@ -112,12 +110,13 @@ $.widget( "ui.mask", {
112110
bufferLength = this.buffer.length,
113111
value = "";
114112

115-
this.isValid = true;
113+
this.empty = this.isValid = true;
116114
for ( bufferPosition = 0; bufferPosition < bufferLength; bufferPosition += bufferObject.length ) {
117115
bufferObject = this.buffer[ bufferPosition ];
118116
if ( bufferObject.literal && !raw ) {
119117
value += bufferObject.literal;
120118
} else if ( bufferObject.value ) {
119+
this.empty = false;
121120
value += bufferObject.value;
122121
for ( counter = bufferObject.value.length; counter < bufferObject.length; counter++ ) {
123122
value += this.options.placeholder;
@@ -155,6 +154,7 @@ $.widget( "ui.mask", {
155154
this._bind({
156155
focus: function( event ) {
157156
lastUnsavedValue = elem.val();
157+
that._paint( true );
158158
setTimeout( function() {
159159
that._caret( that._seekRight( that._parseValue() - 1 ) );
160160
}, 0);
@@ -164,6 +164,7 @@ $.widget( "ui.mask", {
164164
// because we are constantly setting the value of the input, the change event
165165
// never fires - we re-introduce the change event here
166166
that._parseValue();
167+
that._paint( false );
167168
if ( elem.val() !== lastUnsavedValue ) {
168169
elem.trigger( "change" );
169170
}
@@ -250,8 +251,18 @@ $.widget( "ui.mask", {
250251
input: handlePaste
251252
});
252253
},
253-
_paint: function() {
254-
this.element.val( this._getValue() );
254+
_paint: function( focused ) {
255+
if ( focused === undefined ) {
256+
focus = this.element[ 0 ] === document.activeElement;
257+
}
258+
// calling _getValue updates empty
259+
var value = this._getValue();
260+
261+
if ( this.options.clearEmpty && this.empty && !focused ) {
262+
this.element.val( "" );
263+
} else {
264+
this.element.val( value );
265+
}
255266
},
256267
_parseMask: function() {
257268
var key, x, bufferObject, originalPosition,

0 commit comments

Comments
 (0)