Входная маска отформатирует входное значение, чтобы лучше представлять данные.
- Кредитная карта:
4455-4455-1234. -1234
- SSN:
123-12-1234
- Номер телефона (Na):
123-123-1234
Во-первых, извлеките шаблон, найдя индексы пробелов.
function getPattern(pattern) { dashIdxs = []; pattern.split("").forEach((char, idx) => { if (char !== "-") { return; } dashIdxs.push(idx); }); return dashIdxs; }
Два дополнительных функции в качестве обработчиков для OnInput
и КДУЩЬЮ
Мероприятия. ценность
это наше маскированное значение.
function onkeydown({ key }) { if (key === "Backspace" && dashIdxs.includes(value.length - 1)) { value = value.slice(0, -1); } } function oninput({ currentTarget }) { value = currentTarget.value; if (dashIdxs.includes(value.length)) { value += "-"; } }
Рабочий пример, построенный с Mithril.js Отказ Это красивая тривиальная реализация, а не добыча готова. По крайней мере, нужно будет поддерживать копию/пасте.
Обложка Изображение: @Theonlynoonan – https://unsplash.com/photos/qm_le41vjj4.
Оригинал: “https://dev.to/kevinkace/simple-input-mask-b7m”