Detect backspace when defining a pattern

Question

I am creating a control for our app where they are allowed to mask inputs. This is based on the initial user and how they set it up. It can be any pattern they want.

I have a piece of code that is working wonderfully, except when you go to delete what you just entered. This would be find if people were perfect, but we are not so need to ability to delete what we just typed.

So I am wondering if there is a way to detect when they are backspacing.

my html looks like

<p class="maskNum">
  <input type="text" class="form-control mask" autocomplete="off" maxlengthsocial="9" maxlength="11" />
  <input type="text" class="form-control maskval" autocomplete="off" maxlengthsocial="9" maxlength="9" />
</p>

my css looks like

.maskNum {
  position: relative;
}

.maskval {
  position: absolute;
  top: 0;
  color: black;
  background: transparent !important;
  border: none;
  left: 0;
  -webkit-text-fill-color: transparent; //sets just the text color 
  height: 1.5em;
}

input {
  height: 2em;
  width: 50%;
  border-radius: .5em;
  padding-left: 0.5em;
}

and my jQuery looks like

var pattern = 'xxx-xx-0000';
var maxLength = pattern.length;
var maxLenthNum = pattern.replace("-", "").length;

$('.mask').attr('maxlength', maxLenthNum);
$('.maskval').attr('maxlength', maxLength);

$('.maskval').on('keyup keydown change', function() {
  var input = $(this).val();
  var output = "";
  for (var x = 0; x < input.length; x++) {
    if (x < pattern.length) {
      output = pattern[x] == 'x' ? output + 'x' : output + input[x];
    } else
      output += input[x]; 
  }
  if (input.length < pattern.length && pattern[input.length] == '-') {
    output += '-';
    $(this).val(output);
  } else {
    $(this).prev('input').val(output);
  }
});

and a live example it http://codepen.io/zazvorniki/pen/XKNXJg so you can see exactly what is happening.

Answer 1

Take a look at this answer. You need to capture the keyup/keydown events, and if the keyCode is 8 (or 46 if you want the delete key as well), then do whatever you need to do to handle backspace.

Basically you need to add the proper parameter to the event handler function you have already, and check if the key that is pressed is either 8 or 46 before you handle it.

Answer 2

Here is a codepen example. It is a bit buggy but may help: http://codepen.io/KAPastor/pen/WxorYR

var pattern = 'xxx-xx-0000';
var maxLength = pattern.length;
var maxLenthNum = pattern.replace("-", "").length;

$('.mask').attr('maxlength', maxLenthNum);
$('.maskval').attr('maxlength', maxLength);

$('.maskval').on('keyup keydown change', function(e) {

  var input = $(this).val();
  console.log(input)
  var output = "";
  for (var x = 0; x < input.length; x++) {
    if (x < pattern.length) {
      output = pattern[x] == 'x' ? output + 'x' : output + input[x];
    } else
      output += input[x]; 
  }
  if (input.length < pattern.length && pattern[input.length] == '-') {
    output += '-';
    $(this).val(output);
  } else if (e.keyCode == 8 && output[output.length-1] == '-') {

    console.log(output[output.length-1])
    output = output.substring(0,output.length-1)
    console.log(output)
    $(this).prev('input').val(output);                  $(this).val(output);

    //$(this).val(output);
  }else{
    $(this).prev('input').val(output);
  }
});

Similar to the above answer we are passing the event input "e", then looking at the keyCode == 8. In that case we need to adjust the mask to remove both the character and the "-" sign.

Thanks, -K