Number Formatter

Todo: I would like to make this even more generic so it formats any string.

Number Formatter is a built on a pure functions for formatting number strings to the format of the placeholder attribute. Need your input field to use the US phone number format?

<script>
    import('./format_number.js')
    .then(module => {
        document.getElementById('phone_input').addEventListener('input', module.format_input)
    })
    .catch(er => console.error(er))
</script>
<input id="phone_input" type="tel" placeholder="(___) ___-____">

By default _ is the placeholder character but if you want to use a different character just supply the data-placeholder attribute.

<input type="tel" placeholder="...-...-...." data-placeholder=".">

The only restriction is that your format string cannot contain numbers. This is not valid:

<input type="tel" placeholder="000-000-0000" data-placeholder="0">

See the Pen Number Formatter by Daniel Atwood (@datwood) on CodePen.

Features

• Functional
• Works with any custom format
• Fast! Each update take ~0.5ms to execute

Installation

Download here

License

The project is licensed under the GNU General Public License v3.0.