Question

我输入了卡号的文本。它只能包含数字，并且必须以4位数字的块显示给用户（例如：1234 5678 9123 4567）。

我的代码成功删除了输入的字母并创建了数字块。问题是，当我两次键入一个非数字键时，该键一次出现在输入中，似乎忽略了值转换器。尝试连续键入不同的字母时不会发生这种情况。任何第三个输入都会按原样删除该字母，但问题不会消失。

使用console.log，我可以看到toView总是返回正确的值。有没有什么办法解决这一问题？我尝试将'pattern =“ ^ [\ d] * $”'添加到输入中，但这实际上没有任何作用。
底部的示例。

HTML：

<input type="text" id="cardNumber" class="form-control" placeholder="1234 5678 9123 4567"
                           value.bind="cardNumber | cardNumberFormat & validate" disabled.bind="isDisabled">

Javascript：

export class CardNumberFormatValueConverter {
      toView(value) {
        let cardNumberBlocks = this.createCardNumberBlocks(value);
        if (cardNumberBlocks) {
          return cardNumberBlocks.join(" ");
        }
        return "";
      }

      fromView(value) {
        return value.split(" ").join("");
      }

      createCardNumberBlocks(value) {
        if (!value) return "";
        return value.match(/\d{1,4}/g);
      }
    }

例子：
输入：123456-结果：1234 56-正确
输入：123456a-结果：1234 56-正确
输入：123456a2-结果：1234562-正确
输入：123456aa-结果：1234 56a-错误
输入：123456aa2-结果：1234562-正确
输入：123456ab-结果：1234 56-正确
输入：123456aaa-结果：1234 56-正确
输入：123456aba-结果：1234 56-正确
输入：123456aa3bb-结果：1234 563b-错误
键入：123456aabbb-结果：1234 56b-错误

数字格式转换后，Aurelia不需要的字母出现在文本输入中。

0 个答案: