Input Masking

input masking.html

<!-- 
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>