Question

我一直在使用屏蔽功能，允许用户输入数字，并根据某种模式将其屏蔽掉。

例如，他们输入123456789，但它在字段中显示为XXX-XX-6789

现在我已将其硬编码为一种模式，但我想扩展它以允许他们选择他们希望的模式。这主要是因为客户有会员卡或类似的东西。有没有一种简单的方法可以做到这一点而不用硬编码我认为他们可能想要的每个模式？

我的HTML

$(function(){
    $.ajax({
        url: 'localhost/myscript.php',
        type: 'PUT',
        success: function(response) {
            //...
        }
    });
});

我的css

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

我的jquery

.maskNum {
  position: relative;
}

.maskval {
  position: absolute;
  top: 0;
  color: transparent !important;
  background: transparent !important;
  border: none;
  left: 0;
  text-indent: -9999px;
}

和我做的一个小提琴，用来测试我到目前为止所构建的内容。 https://jsfiddle.net/5xwomLf7/8/

Answer 1

如果你的模式只包含数字和x：

var pattern = 'x0x-0x-00x0'
$('.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];  // or nothing if you want the value to be only as long as the pattern
    }  

    if (input.length < pattern.length && pattern[input.length] == '-') {
        output += '-';
        $(this).val(output);
    } else {
        $(this).prev('input').val(output);
    }
});

可定制的jquery面具

1 个答案: