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.

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.

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.

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.

Imaskjs

vanilla javascript input mask.

JQuery Mask Plugin

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

React Input Mask

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

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.

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.

Vue The Mask

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

Angular Input Masks

Opinionated input masks for AngularJS.

Superplaceholder.js

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

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.

Maskjs

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

Jquery Maskmoney

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