{"id":11088,"library":"inputmask","title":"Inputmask","description":"Inputmask is a JavaScript library for applying client-side input masks to HTML form elements, ensuring user input conforms to a predefined format such as phone numbers, dates, or currency. It helps guide users, reduces input errors, and improves data consistency. The current stable version is 5.0.9, with updates released as needed for bug fixes, new features, and browser compatibility. A key differentiator is its versatile support for vanilla JavaScript, jQuery, and jqlite, making it adaptable across diverse web projects. The library provides an extensive set of predefined masks and offers robust options for custom mask definitions, including control over placeholders, repeat behavior, and real-time validation, making it a flexible and powerful solution for input formatting.","status":"active","version":"5.0.9","language":"javascript","source_language":"en","source_url":"https://github.com/RobinHerbots/Inputmask","tags":["javascript","form","input","inputmask","jquery","jquery-plugin","mask","plugins"],"install":[{"cmd":"npm install inputmask","lang":"bash","label":"npm"},{"cmd":"yarn add inputmask","lang":"bash","label":"yarn"},{"cmd":"pnpm add inputmask","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required only if using the jQuery plugin version of Inputmask. The core library works independently.","package":"jquery","optional":true}],"imports":[{"note":"This is the standard ESM import for vanilla JavaScript usage in modern bundler environments. CommonJS `require` is also supported but less common in new projects.","wrong":"const Inputmask = require('inputmask');","symbol":"Inputmask","correct":"import Inputmask from 'inputmask';"},{"note":"When using the jQuery plugin, jQuery must be imported or available globally *before* `inputmask` and `jquery.inputmask`. The jQuery plugin extends `$.fn.inputmask` and does not export a named symbol directly. Extension files like `inputmask.numeric.extensions.js` should be imported similarly if needed.","wrong":"import { Inputmask } from 'inputmask/dist/jquery.inputmask';","symbol":"jQuery Plugin","correct":"import 'jquery';\nimport 'inputmask/dist/inputmask';\nimport 'inputmask/dist/jquery.inputmask';"},{"note":"For TypeScript projects, install `@types/inputmask` for type declarations. Use `import type` to avoid bundling unnecessary runtime code.","wrong":"import { InputmaskOptions } from 'inputmask';","symbol":"Type Definitions","correct":"import type { InputmaskOptions } from 'inputmask';"},{"note":"For vanilla JS, extensions are loaded separately. For ESM, import them from `lib/extensions` after the main `inputmask` import. The specific path might vary slightly based on your bundler configuration.","symbol":"Specific Extensions (ESM)","correct":"import Inputmask from 'inputmask';\nimport 'inputmask/lib/extensions/inputmask.numeric.extensions';"}],"quickstart":{"code":"import Inputmask from 'inputmask';\n\n// Vanilla JavaScript example\ndocument.addEventListener('DOMContentLoaded', () => {\n  const phoneInput = document.getElementById('phone-number');\n  const dateInput = document.getElementById('date-input');\n\n  if (phoneInput) {\n    const phoneMask = new Inputmask('+9 (999) 999-9999');\n    phoneMask.mask(phoneInput);\n  }\n\n  if (dateInput) {\n    // Ensure inputmask.date.extensions is imported for 'datetime' alias\n    const dateMask = new Inputmask('datetime', {\n      inputFormat: 'dd/mm/yyyy',\n      placeholder: 'dd/mm/yyyy'\n    });\n    dateMask.mask(dateInput);\n  }\n});\n\n// HTML to go with the above JavaScript:\n// <input type=\"text\" id=\"phone-number\" placeholder=\"+_ (___) ___-____\">\n// <input type=\"text\" id=\"date-input\" placeholder=\"dd/mm/yyyy\">","lang":"typescript","description":"Demonstrates how to apply an input mask to HTML input fields for phone numbers and dates using vanilla JavaScript and the ESM import style."},"warnings":[{"fix":"Review the official changelog and migration guide for specific API changes. Adjust custom masks and options, especially for 'overwrite' behavior.","message":"Version 5.0 introduced stricter typings and some changes to internal behaviors, including how overwrite mode works. Code written for v4 may require adjustments.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Always load jQuery first, then `inputmask.js`, then any extensions (e.g., `inputmask.date.extensions.js`), and finally `jquery.inputmask.js`.","message":"When using the jQuery plugin (`jquery.inputmask.js`), ensure that jQuery is loaded and available *before* both the main `inputmask.js` and `jquery.inputmask.js` scripts. Incorrect loading order will prevent the plugin from attaching to jQuery.","severity":"gotcha","affected_versions":">=3.x"},{"fix":"Refactor mask definitions to move optional segments to the end of the pattern, e.g., `(999) 999-999[9]` instead of `(999) [999] 999-9999`.","message":"Optional parts in masks, denoted by square brackets `[]`, should generally be placed at the end of the mask pattern. Placing them in the middle can lead to unexpected or inconsistent masking behavior.","severity":"gotcha","affected_versions":">=3.x"},{"fix":"Ensure you are using a stable release of v5.0.x (like 5.0.9 or later) as these issues were addressed. If still encountering conflicts, simplify or remove complex `inputformat` options for debugging.","message":"Early beta versions of Inputmask v5 (e.g., v5 beta 131+) were reported to cause conflicts with other JavaScript libraries and break page functionality when certain date formatting options like `inputformat:'yyyy-mm-dd'` were used. This was likely due to aggressive DOM manipulation or global scope pollution.","severity":"breaking","affected_versions":"5.0.0-beta.x (specifically >=beta.131)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Verify that jQuery is included on the page, followed by `inputmask.js`, then any extension files (e.g., `inputmask.numeric.extensions.js`), and finally `jquery.inputmask.js`.","cause":"The jQuery plugin for Inputmask (`jquery.inputmask.js`) was not loaded, or jQuery itself was not available before the plugin tried to attach.","error":"TypeError: $(...).inputmask is not a function"},{"fix":"For ESM, ensure `import Inputmask from 'inputmask';` is at the top of your module. For script tags, verify the `inputmask.js` file is correctly linked in your HTML before its usage.","cause":"The main Inputmask library script (`inputmask.js`) was not loaded or imported correctly in a vanilla JavaScript setup.","error":"Uncaught ReferenceError: Inputmask is not defined"},{"fix":"Ensure you are on Inputmask version 5.0.8 or later, as this issue was addressed in that release. If using an older beta, update to the latest stable v5.0.x.","cause":"This specific error was reported when upgrading from Inputmask v5 beta to 5.0.8, indicating an issue with how `null` was handled in certain parts of the library.","error":"Uncaught ReferenceError: NULL is not defined"},{"fix":"Wrap your masking logic inside a `DOMContentLoaded` event listener or a `$(document).ready()` block for jQuery. Double-check your element ID or class selectors to ensure they match existing HTML elements.","cause":"The JavaScript code to apply the mask is executing before the target input element exists in the DOM, or the selector used is incorrect.","error":"Mask not applied to input field / Input field not responding to mask pattern"}],"ecosystem":"npm"}