javascript - 信用卡号码掩蔽与 ionic 输入 - Ionic3

Question

我尝试了 3-4 个 npm 模块来屏蔽我的信用卡号 ionic 输入，使其成为 4 组。

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

我想将我的 ionic 输入屏蔽为 4 组(信用卡号。)

注意:应该是描述有问题，请忽略。

Answer 1

我通过手动逻辑来屏蔽输入:

在 ion-input 中，我绑定(bind)了 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;
 }

谢谢 Referenceed Link