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。

Answer 2

这是一个codepen示例。这有点儿马车但可能会有所帮助： 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);
  }
});

与上面的答案类似，我们传递事件输入“e”，然后查看keyCode == 8.在这种情况下，我们需要调整掩码以删除字符和“ - ”符号。

谢谢， -K

定义模式时检测退格

2 个答案: