15 JavaScript Input Mask Libraries

Input validation is always a chore to set up. An input mask is a way to enforce the format of the user’s input in a simple way. So here are 15 JavaScript libraries for adding an input task to input fields.

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically. The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won’t need to write any mind-blowing regular expressions or mask patterns to format input text.

Cleave.js

Inputmask

Inputmask is a javascript library which creates an input mask. Inputmask can run against vanilla javascript, jQuery and jqlite. An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers.

Inputmask

Text Mask

Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything! There are convenient wrappers for React, Angular 2, Ember, and Vue.

Text Mask

Intl Tel Input

A JavaScript plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user’s country, displays a relevant placeholder and provides formatting/validation methods.

Intl Tel Input

Imaskjs

vanilla javascript input mask.

Imaskjs

JQuery Mask Plugin

A jQuery Plugin to make masks on form fields and HTML elements.

JQuery Mask Plugin

React Input Mask

Input masking component for React. Made with attention to UX.

React Input Mask

Input Masking

Framework agnostic accessible input masking library. input-mask.js enables you to include a mask on any input where a specific data entry format is required. The placeholder text remains in place, displaying which characters still need to be included. The placeholder is CSS styleable. The user can enter letters and numbers. All other characters, like spaces, dashes, and parenthesis are automatically added by the script, making data entery easier when using dynamic keypads.

Input Masking

Vanilla Masker

VanillaMasker is a pure javascript mask input. It’s a pure JavaScript mask input. Now you can use a simple and pure javascript lib to mask your input elements, without need to load jQuery or Zepto to do it. Let’s live a lightweight client-side world using micro libraries as VanillaMasker is! Don’t worry about where this will work, because this is a cross-browser and cross-device library. And if you find any bug, please let us know about it reporting an issue.

Vanilla Masker

Vue The Mask

Tiny (<2k gzipped) and dependency free mask input for Vue.js. Vue The Mask

Angular Input Masks

Opinionated input masks for AngularJS.

Angular Input Masks

Superplaceholder.js

superplaceholder.js is a library to bring your input placeholders to life by cycling multiple instructions in a single input placeholder.

Superplaceholder.js

Rifm

React Input Format & Mask, tiny component to transform any input component into formatted or masked input. Supports number, date, phone, currency, credit card, etc.

Rifm

Maskjs

Mask.js is a simple functionality that you can use to force user met a pattern into inputs.

Maskjs

Jquery Maskmoney

jQuery plugin to mask data entry in the input text in the form of money (currency).

Jquery Maskmoney

2 Comments

  1. Mariosays:

    Cleave.js is awesome. And I made an Angular cleave directive https://www.npmjs.com/package/ngx-cleave-directive

Leave a Reply to Pierre Cancel reply

Please be polite. We appreciate that. Your email address will not be published and required fields are marked

This site uses Akismet to reduce spam. Learn how your comment data is processed.