loading...
Cover image for Simple Input Mask

Simple Input Mask

kevinkace profile image Kevin Cameron ・1 min read

An input mask will format an input value to better represent the data.

  • credit card: 4455-4455-1234-1234
  • SSN: 123-12-1234
  • phone number (NA): 123-123-1234

First, extract the pattern by finding the indexes of the spaces.

function getPattern(pattern) {
    dashIdxs = [];

    pattern.split("").forEach((char, idx) => {
        if (char !== "-") {
            return;
        }

        dashIdxs.push(idx);
    });

    return dashIdxs;
}

Two additional functions as handlers for oninput and keydown events. value is the our masked value.

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 += "-";
    }
}

A working example built with Mithril.js.

This is a pretty trivial implementation, and not production ready. It would at least need to support copy/paste.


cover image: @theonlynoonan - https://unsplash.com/photos/QM_LE41VJJ4

Discussion

pic
Editor guide