delimited-input

Reading long numbers or codes is hard without some kind of delimiter to provide pacing or idea of the scale. This library provides support for formatting user input as it's written.

This library is fairly early in development but it should provide some basic support for formatting rules already.

The demos aim to give ideas of potential solutions, but they do not represent any solid user experience design. It is up to you to determine which configuration actually improves usability, if any.

Project in Github

Big number

Credit card

Product code with overwrite

<input id="product_code" type="text" size="14"
       style="text-align: center"
       value="abj3-9lv2-jvk3"/>

MAC address with separator prefill

<input id="product_code" type="text" size="17"
       style="text-align: center"
       value="AA:BB:CC:"/>

Erase placeholder demo

<input id="product_code" type="text" size="7"
       value="???-???"/>