Question

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

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

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

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

Answer 1

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

在ion-input我绑定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

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

1 个答案: