使用离子输入进行信用卡号屏蔽 - Ionic3

Question

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

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

我想将我的离子输入屏蔽为 4 个一组（信用卡号。）

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

Answer 1

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

在ion-inputi 绑定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;
 }

感谢参考链接