Комментарии 13
Вот тут https://github.com/Tinkoff/maskito/blob/main/projects/core/src/lib/mask.ts#L214 очень неаккуратный обработчик. Клавишу insert не обрабатывает. Чтобы такого не городить используйте скрытый input или textarea.
Вы правильно подметили, что данный обработчик handleKeydown обрабатывает далеко не все возможные кейсы.
Но, к счастью, он существует лишь для древних версий Firefox, которые не поддерживают нативное beforeinput событие (которое уже гораздо лучше справляется с огромным перечнем возможных способов взаимодействия пользователя с текстовым полем). Для своих бизнесовых потребностей нам пока еще нужна частичная поддержка старого Firefox.
Для всех остальных современных браузеров мы уже не используем событие `keydown`, а опираемся на комбинацию `beforeinput`/`input` событий.
Подробнее об всем этом можно почитать в моей предыдущей статье "Трудности маскирования текстового поля".
Серебряной пули в данном вопросе, к сожалению, нет.
То есть, если ваша маска требует поддержки разных локалей, то придется пописать немного кода.
Но Maskito уже сейчас предоставляет несколько встроенных конфигурируемых популярных масок (пакет @maskito/kit), которые пытаются учитывать особенности разных стран.
Например: маска Number позволяет легко задавать свои decimalSeparator и thousandSeparator, маска Date предоставляет разные форматы дат (dd/mm/yyyy, yyyy/mm/dd, mm/dd/yyyy), а маска Time дает возможность настраивать 12/24-часовой формат времени.
Пакет @maskito/kit будет продолжать расширяться популярными решениями. И, разумеется, мы будем продолжать всегда держать в уме вопросы локализации.
Зачем вообще мешать пользователю писать дату в любом удобном ему формате?
Почему ваши формы заставляют пользователей указывать дату, к примеру, в формате 01.05.1999? Почему пользователь не может написать "1 января 1999 года"? Кажется, что компьютер может справится с задачей парсинга и переспросить, если не справился.
Почему я должен задавать номер телефона в виде +7 (999) 997-ХХ-YY, если мне хочется задавать его в виде +7 999 99-XXX-YY? Почему я не могу так сделать, тем более, если номер станет лучше читаться? Зачем вообще скобочки вокруг кода города, если его обязательно набирать?
Как мне объяснить бабушке по телефону, что у неё не сломалась клавиатура, а просто программисты запрещают писать в некоторых полях ввода буквы, но не предупреждают об этом?
Кажется, что вся проблема "маскирования" заключается в том, что вместо того, чтобы тратить силы на поддержку любого удобного пользователю ввода, вы тратите силы на то, чтобы запретить пользователю вводить данные в любом формате, отличном от того, который используется в вашей БД, ну или просто от "единого верного способа".
И какая в этом проблема? Просто вычислите, кто к вам пришёл и откуда, и сделайте вывод. Не уверены? Переспросите.
В текущем интерфейсе у Тинкоффа этот вопрос тоже не решён: там предлагают заполнить 01.04.1999, ну окей, я зашёл из Америки и заполнил привычно. И ошибся. Если день не больше 12, то никто и не заметит подмены, ни я, ни сотрудник банка.
На самом деле, у меня даже была именно такая проблема как-то в ВТБ. Сотрудник перепутал день и месяц моего рождения в поле ввода и мне стоило потом больших усилий доказать, что я -- это я. И никакая маскификация не помогла.
По второму вопросу по ссылке, как раз сделано верно, ничего не запрещают вводить, клавиатура работает. Но в Taiga UI как раз буквы запрещены с помощью той самой библиотеки из статьи.
Плохой UX -- не когда ты переспрашиваешь у пользователя, если неуверен, а когда ты заполняешь базу неверными данными или вообще не даёшь пользователю заполнить форму и просто теряешь клиента. Лучший способ этого достичь -- ввести маски в полях и валидацию ввода.
Мой имейл, к примеру, содержит 2 символа до собачки, множество раз я не мог даже зарегистрироваться где-то просто потому, что программист решил, что такого не бывает.
Дизайнеры трудятся, маски отрисовывают, программисты трудятся, думают как заимплементить, во всех браузерах желательно, тестировщики баги ищут. Называется, ответственная социальная политика =)
Если серьёзно, то согласен с вами, все эти причинения удобств могут быть, как правило заменены несколькими replace-ами на стороне приведения данных к единому формату.
Ох уж эта дата... Звёздочку поставил, issue завёл.
Maskito – новая коллекция библиотек для маскирования текстовых полей