У меня есть текст для ввода номера карты.Он должен содержать только цифры и должен отображаться пользователю в виде 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 - Результат: 1234 562 - Правильный
Набор: 123456aa - Результат: 1234 56a - Неправильный
Набор: 123456aa2 - Результат:1234 562 - правильно
ввод: 123456ab - результат: 1234 56 - правильно
набор: 123456aaa - результат: 1234 56 - правильно
набор: 123456aba - результат: 1234 56 - правильно
набор: 123456aa3bb -Результат: 1234 563b - Неверно
Набрав: 123456aabbb - Результат: 1234 56b - Неверно