Simple Input Mask

Kevin Cameron — Wed, 23 Oct 2019 04:32:44 +0000

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

Modals and Scrollbars

Kevin Cameron — Mon, 29 Apr 2019 15:05:47 +0000

Today while building a modal I experimented with a different layout that solves a few issues with the scrollbar, in a simple way. Jump to the final version, or read on.

Basic Modal

The most basic modal is 2 <div> elements:

an overlay position: fixed; in the <body>
and the content, nested in the overlay

Scrollbar

There's an issue with this simple modal: the vertical scrollbar of the main content persists when the modal is opened.

Opening a modal should fully switch context away from the underlying content to the modal. Scrolling presentation and interaction need to follow this context switch.

A common solution is to add overflow: hidden on <html> or <body>, removing the scrollbar entirely. This also works if the modal content is scrollable.

Content Shift

Removing the scrollbar fixes one problem, but introduces another: the underlying content shifts position.

When the scrollbar is removed, the content takes up that extra width, leading to text and content reflowing, and backgrounds repositioning.

In the past I've solved this in two ways: adding padding/margin on <html>, or setting the width of <html>.

These values have to be recalculated and updated when the window is resized, or as content is added/removed.

Modal Over Everything

So today as I was building a modal I got to this stage and thought about why the modal exists within the scrollable content. It should be fully separate, and on top of the scrollbar. This is possible by restructuring the document.

The modal has to be outside the scrollable content; it's added to the <body> and can't be any higher up the DOM, so the scrollable content will need to be a child of <body>.

What I like about this:

no code to remove/add scrollbars
no code to set width/margin to account for the scrollbar
no recalculations when resized

It just works.

Lastly

One drawback with this setup is that it's atypical. Any other code expecting overflow to be on <html> or <body> will need to be refactored. This and other issues likely wouldn't be hard to resolve.

I plan to test this solution further for browser and device compatibility, and hopefully it proves out.