Skip to content

Commit

Permalink
A number of improvements to improve flexibility and ease of use
Browse files Browse the repository at this point in the history 
 - Use an options object instead of hard coded values
 - Make auto initalizeation optional
 - add refresh method
 - allow a nodeList to be used instead of a selector
 - Fix bug where inputs are replaced losing some props in IE and losing event handlers in all browsers
  • Loading branch information
@arschmitz
arschmitz committed Sep 6, 2015
1 parent 1832e33 commit 414d055
Show file tree
Hide file tree
Showing 2 changed files with 80 additions and 55 deletions.
3 changes: 1 addition & 2 deletions index.html
View file
Expand Up @@ -37,7 +37,6 @@
</li>
</ul>

<script src="js/masking-input.js"></script>

<script src="js/masking-input.js" data-autoinit="true"></script>
</body>
</html>
132 changes: 79 additions & 53 deletions js/masking-input.js
View file
@@ -1,41 +1,73 @@
var masking = {

// User defined Values
//maskedInputs : document.getElementsByClassName('masked'), // add with IE 8's death
maskedInputs : document.querySelectorAll('.masked'), // kill with IE 8's death
maskedNumber : 'XdDmMyY9',
maskedLetter : '_',

init: function () {
masking.setUpMasks(masking.maskedInputs);
masking.maskedInputs = document.querySelectorAll('.masked'); // Repopulating. Needed b/c static node list was created above.
masking.activateMasking(masking.maskedInputs);
// Default Values
defaults: {
masked : '.masked',
maskedNumber : 'XdDmMyY9',
maskedLetter : '_',
error: function(){}
},

setUpMasks: function (inputs) {
var i, l = inputs.length;
init: function ( options ) {
if ( options && options.masked ) {
// Make it easy to wrap this plugin and pass elements instead of a selector
options.masked = typeof options.masked === string ? document.querySelectorAll( options.masked ) : options.masked;
}

for(i = 0; i < l; i++) {
masking.createShell(inputs[i]);
if ( options ) {
this.options = {
masked: options.masked || document.querySelectorAll( this.defaults.masked ),
maskedNumber: options.maskedNumber || this.defaults.maskedNumber,
maskedLetter: options.maskedLetter || this.defaults.maskedLetter,
error: options.onError || this.defaults.onError
}
} else {
this.options = this.defaults;
this.options.masked = document.querySelectorAll( this.options.masked );
}

this.refresh( true );
},

refresh: function( init ) {
var input, parentClass;

if ( !init ) {
this.options.masked = document.querySelectorAll( this.options.masked );
}

for(i = 0; i < this.options.masked.length; i++) {
input = this.options.masked[i]
parentClass = input.parentNode.getAttribute('class');

if ( !parentClass || ( parentClass && parentClass.indexOf( 'shell' ) === -1 ) ) {
this.createShell(input);
this.activateMasking(input);
}
}
},

// replaces each masked input with a shall containing the input and it's mask.
createShell : function (input) {
var text = '',
placeholder = input.getAttribute('placeholder');
var wrap = document.createElement('span'),
mask = document.createElement('span'),
emphasis = document.createElement('i'),
placeholderText = input.getAttribute('placeholder'),
placeholder = document.createTextNode(placeholderText);

input.setAttribute('maxlength', placeholder.length);
input.setAttribute('data-placeholder', placeholder);
input.setAttribute('data-placeholder', placeholderText);
input.removeAttribute('placeholder');

text = '<span class="shell">' +
'<span aria-hidden="true" id="' + input.id +
'Mask"><i></i>' + placeholder + '</span>' +
input.outerHTML +
'</span>';
mask.setAttribute('aria-hidden', 'true');
mask.setAttribute('id', input.getAttribute('id') + 'Mask');
mask.appendChild(emphasis);
mask.appendChild(placeholder);

input.outerHTML = text;
wrap.setAttribute('class', 'shell');
wrap.appendChild(mask);
input.parentNode.insertBefore( wrap, input );
wrap.appendChild(input);
},

setValueOfMask : function (e) {
Expand All @@ -46,20 +78,15 @@ var masking = {
},

// add event listeners
activateMasking : function (inputs) {
var i, l;

for (i = 0, l = inputs.length; i < l; i++) {
if (masking.maskedInputs[i].addEventListener) { // remove "if" after death of IE 8
masking.maskedInputs[i].addEventListener('keyup', function(e) {
masking.handleValueChange(e);
}, false);
} else if (masking.maskedInputs[i].attachEvent) { // For IE 8
masking.maskedInputs[i].attachEvent("onkeyup", function(e) {
e.target = e.srcElement;
masking.handleValueChange(e);
});
}
activateMasking : function (input) {
var that = this;
if (input.addEventListener) { // remove "if" after death of IE 8
input.addEventListener('keyup', this.handleValueChange, false);
} else if (input.attachEvent) { // For IE 8
input.attachEvent("onkeyup", function(e) {
e.target = e.srcElement;
that.handleValueChange(e);
});
}
},

Expand Down Expand Up @@ -94,20 +121,15 @@ var masking = {
strippedValue = isCharsetPresent ? value.replace(/\W/g, "") : value.replace(/\D/g, "");

for (i = 0, j = 0; i < l; i++) {
var x =
isInt = !isNaN(parseInt(strippedValue[j]));
isLetter = strippedValue[j] ? strippedValue[j].match(/[A-Z]/i) : false;
matchesNumber = masking.maskedNumber.indexOf(placeholder[i]) >= 0;
matchesLetter = masking.maskedLetter.indexOf(placeholder[i]) >= 0;

matchesNumber = this.options.maskedNumber.indexOf(placeholder[i]) >= 0;
matchesLetter = this.options.maskedLetter.indexOf(placeholder[i]) >= 0;
if ((matchesNumber && isInt) || (isCharsetPresent && matchesLetter && isLetter)) {

newValue += strippedValue[j++];

} else if ((!isCharsetPresent && !isInt && matchesNumber) || (isCharsetPresent && ((matchesLetter && !isLetter) || (matchesNumber && !isInt)))) {
// masking.errorOnKeyEntry(); // write your own error handling function
return newValue;

this.options.onError( e ); // write your own error handling function
return newValue;
} else {
newValue += placeholder[i];
}
Expand All @@ -117,7 +139,7 @@ var masking = {
}
}
if (e.target.getAttribute('data-valid-example')) {
return masking.validateProgress(e, newValue);
return this.validateProgress(e, newValue);
}
return newValue;
},
Expand Down Expand Up @@ -146,11 +168,15 @@ var masking = {
}

return value;
},

errorOnKeyEntry : function () {
// Write your own error handling
}
}
};

// Declaritive initalization
(function(){
var scripts = document.getElementsByTagName( "script" ),
script = scripts[ scripts.length - 1 ];
if ( script.getAttribute( "data-autoinit" ) ) {
masking.init();
}
})();

masking.init();

0 comments on commit 414d055

Please sign in to comment.