jquery - 定义模式时检测退格键

Question

我正在为我们的应用程序创建一个控件，允许它们屏蔽输入。这基于初始用户及其设置方式。它可以是他们想要的任何图案。

我有一段代码运行得非常好，除非你去删除刚刚输入的内容。如果人们是完美的，就会发现这一点，但我们并不那么需要删除我们刚刚输入的内容的能力。

所以我想知道是否有一种方法可以检测它们何时退格。

我的 html 看起来像

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

我的 CSS 看起来像

.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;
}

我的 jQuery 看起来像

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);
  }
});

和一个实例 http://codepen.io/zazvorniki/pen/XKNXJg这样您就可以准确地看到正在发生的事情。

Answer 1

看看this answer 。您需要捕获 keyup/keydown 事件，如果 keyCode 为 8(如果您还需要删除键，则为 46)，然后执行您需要执行的任何操作来处理退格键。

基本上，您需要向已有的事件处理函数添加适当的参数，并在处理之前检查按下的键是 8 还是 46。