用离子输入掩蔽信用卡号码- Ionic3

Question

我尝试了3-4的npm模块，以掩盖我的离子输入信用卡号码为4组。

但是每个模块在模块中都有各自的错误。

我想掩盖我的离子输入为4组(信用卡号码)。

Notes：应该有一些描述问题，请忽略它。

Answer 1

我用手动逻辑解决了隐藏输入的问题：

在ion-input中，我绑定了blur事件并在blur上调用了mask()。

下面是掩码函数的代码：

mask(event) {

setTimeout(() => {
  var inputTxt = event.srcElement.value;
  inputTxt = inputTxt ? inputTxt.split(" ").join("") : "";
  inputTxt = inputTxt.length > 16 ? inputTxt.substring(0, 16) : inputTxt;
  this.cardNumber = this.maskString(inputTxt);
 }, 500);
}

 maskString(inputTxt) {
   inputTxt = inputTxt.replace(/\D/g, "");
   inputTxt = inputTxt.replace(/(\d{4})(\d)/, "$1 $2");
   inputTxt = inputTxt.replace(/(\d{4})(\d)/, "$1 $2");
   inputTxt = inputTxt.replace(/(\d{4})(\d)/, "$1 $2");
   inputTxt = inputTxt.replace(/(\d{4})(\d)/, "$1 $2");
   return inputTxt;
 }

谢谢参考链