Рубрики
Без рубрики

Простая входная маска

Входная маска для кредитных карт, телефонов и т. Д. Помечено JavaScript, вход, форма, данные.

Входная маска отформатирует входное значение, чтобы лучше представлять данные.

  • Кредитная карта: 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”