javascript - 带有 ionic 输入的信用卡号掩盖-Ionic3

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

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

我想将我的离子输入掩盖为4组（信用卡号）。

注意：应该存在一些描述问题，请忽略它。

最佳答案

我通过手动逻辑解决了屏蔽输入的问题：

在ion-input中，我绑定blur事件并在模糊时调用mask()。

这是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;
 }

谢谢Referenceed Link