Skip to content

Instantly share code, notes, and snippets.

@ahallora
Last active November 7, 2016 11:20
Show Gist options
  • Save ahallora/5551c9d70e28b11a794622cdc07102c5 to your computer and use it in GitHub Desktop.
Save ahallora/5551c9d70e28b11a794622cdc07102c5 to your computer and use it in GitHub Desktop.
Input Masking
<!--
Author: Anders Holm-Jensen @ 7-NOV-2016
License: MIT
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.slim.js" integrity="sha256-5i/mQ300M779N2OVDrl16lbohwXNUdzL/R2aVUXyXWA=" crossorigin="anonymous"></script>
<h4>Input Masking</h4>
<input type="text" class="datamasked-input" data-maskgroup="partygroup" data-masklength="6" value="" onclick="alert('yes, we made it! Now join ' + this.value);" />
<script type="text/javascript">
function initMaskInputs() {
$("input[type='text'][data-maskgroup!='']").each(function(i, inp) {
var inp = $(inp);
var maskLength = (inp.attr('data-masklength')) ? parseInt(inp.attr('data-masklength')) : 0;
var maskGroup = inp.attr('data-maskgroup');
var maskCSS = inp.attr('class');
var container;
for (var i = 0; i < maskLength; i++) {
if( i === 0 ) container = $('<div class="'+maskCSS+' mask-container"></div>');
var newInp = $('<input type="text" class="mask-input" placeholder="X" maxlength="1" data-maskentry="'+i+'" data-masklength="'+maskLength+'" data-maskgroup="'+maskGroup+'" value="" />');
container.append(newInp);
}
if( container ) {
inp.after(container);
function initMaskInputs() {
$("input[type='text'][data-maskgroup!='']").each(function(i, inp) {
var inp = $(inp);
var maskLength = (inp.attr('data-masklength')) ? parseInt(inp.attr('data-masklength')) : 0;
var maskGroup = inp.attr('data-maskgroup');
var maskCSS = inp.attr('class');
var container;
for (var i = 0; i < maskLength; i++) {
if( i === 0 ) container = $('<div class="'+maskCSS+' mask-container"></div>');
var newInp = $('<input type="text" autocomplete="off" class="mask-input" placeholder="X" maxlength="1" data-maskentry="'+i+'" data-masklength="'+maskLength+'" data-maskgroup="'+maskGroup+'" value="" />');
container.append(newInp);
}
if( container ) {
inp.after(container);
container.find('input').on('focus', inputMaskFocus);
container.find('input').on('input propertychange', inputMaskValidate);
container.find('input').on('keyup', inputMaskReturn);
inp.addClass('masked-input-value-container');
inp.hide();
}
});
}
function inputMaskFocus() {
var inp = $(this);
var maskGroup = inp.attr('data-maskgroup');
var focusIndex = parseInt(inp.attr('data-maskentry'));
var currentValue = $("input[data-maskgroup='"+maskGroup+"'].masked-input-value-container").val();
if(focusIndex > currentValue.length) {
var target = inp.siblings("[data-maskentry='"+currentValue.length+"']");
target.focus();
}
}
function inputMaskReturn(event) {
var inp = $(this);
var focusIndex = parseInt(inp.attr('data-maskentry')); // 2
if ( event.which == 13 ) event.preventDefault(); // dont allow return
if ( event.which == 8 && inp.val().length === 0 && focusIndex > 0) {
inp.prev().val('');
inp.prev().focus();
}
}
function inputMaskValidate() {
var inp = $(this);
var maskGroup = inp.attr('data-maskgroup');
var maskLength = parseInt(inp.attr('data-masklength'));
var thisIndex = parseInt(inp.attr('data-maskentry'));
var valueContainer = $("input[data-maskgroup='"+maskGroup+"'].masked-input-value-container").first();
var group = $("input[data-maskgroup='"+maskGroup+"'].mask-input");
var val = '';
$(group).each(function(i,item) {
val = val + $(item).val();
});
valueContainer.val(val);
var isFirst = ( thisIndex === 0);
var isLast = ( thisIndex === maskLength-1);
if( inp.val() ) {
if(!isLast) inp.next().focus();
if( isLast && valueContainer.val().length === maskLength) {
valueContainer.trigger('click');
}
} else {
if(!isFirst) inp.prev().focus();
}
}
$(function() {
initMaskInputs();
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment