OSS探訪
GitHubでログイン
GitHubで見るプロジェクトサイト

inputに電話番号・数値・日付などの入力形式を適用し、表示値・未整形値・型付き値を分けて扱う

OSS規模スコア 203.6OSS健全度 28更新ペース 0 Commit/30日
スコアの見方

OSS規模スコアはStars・Watchers・Forks・Contributorsを対数圧縮して重み付けした現在の規模指標（上限なし）です。発掘スコアは現在のOSS規模スコアから発掘時点のOSS規模スコアを引いた値、更新ペースは直近30日Commit数、成長モメンタムは直近の観測期間におけるOSS規模スコア差、OSS健全度は取得できた更新状況・Community Health・Releaseの0〜100評価です。

Stars
5,182
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2024/10/11
ページ内ナビ

概要

IMaskはinputやcontenteditable要素へ入力maskを適用するJavaScript/TypeScriptライブラリです。Pattern、Number、Date、RegExp、Dynamicなどのmaskを選べ、画面上のvalueとunmaskedValue、型を持つtypedValueを用途に応じて扱えます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：

主な特徴

Pattern・Number・Dateなど用途別のmaskを選ぶ

固定patternだけでなく、正規表現、数値、日付、関数、Dynamic、Enum、Rangeなどのmaskを提供します。optional部分やcustom definitionを含む入力形式も構成できます。

出典：[1]

表示値・未整形値・型付き値を分けて取得する

input controlは表示用のvalueに加え、書式を外したunmaskedValueや、数値・日付などの型として扱うtypedValueを持ちます。表示とアプリケーション内部の値を分離できます。

出典：[2][1]

frameworkごとの専用プラグインを同じmask engineで利用する

monorepoにはVue、Angular、React、React Native、Svelte、Solid向けpluginが用意されています。vanilla JavaScriptとフレームワーク連携で同じmaskの考え方を共有できます。

出典：[1]

向いている用途

電話番号・金額・日付・コード入力の形式を画面側で補助したい場合に向く

入力途中からformatを整え、利用者には読みやすい値を見せつつ、送信時は未整形値や数値を使いたいフォームに適します。

出典：[1]

導入前の確認

maskは入力形式を補助するもので、業務上の妥当性検証とは分ける

maskに一致した値でも、電話番号の存在確認や金額の業務制約まで保証するわけではありません。サーバー側の検証や業務ルールは別に実装してください。

出典：[1]

フレームワーク用プラグインを使う場合はcoreとwrapperのversion整合を確認する

ReactやVue等のラッパーは同じmonorepoで提供されますが、アプリケーション側では利用するフレームワークのversionと対応packageの依存関係を合わせて確認してください。

出典：[1]

参考にした公式資料

  1. [1]IMask v7.6.1 README(2026-10-05)
  2. [2]IMask guide(2026-10-05)
  3. [3]IMask v7.6.1 package metadata(2026-10-05)
  4. [4]IMask v7.6.1 release(2026-10-05)
編集部からの補足

入力表示と送信値を分けて扱えるため、電話番号や金額の見た目を整えつつ、未整形値や型付き値をアプリケーションへ渡したいフォームで使いやすいライブラリです。React・Vue・Angular等ではmonorepo内に専用プラグインもあります。

3ステップで試す

  1. 1

    IMask 7.6.1を導入する

    確認対象の安定版を固定して導入します。

    npm install --save-exact imask@7.6.1
  2. 2

    input要素へ数値maskを設定する

    READMEの導入方法に沿ってIMaskを読み込み、数値入力へmaskを適用します。

    import IMask from 'imask'; const input = document.querySelector('#amount'); const mask = IMask(input, { mask: Number, thousandsSeparator: ',' });
  3. 3

    表示値と未整形値を確認する

    画面表示用のvalue、書式を外したunmaskedValue、数値として扱えるtypedValueを確認します。

    console.log(mask.value); console.log(mask.unmaskedValue); console.log(mask.typedValue);
公式READMEで確認

成長

成長の推移 · 直近30日

5,182 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）
0
Open PR
17

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

カテゴリ

タグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る
GitHubで見る

GitHub Topics

  • inputmask
  • vanilla-js
Stars
5,182
Forks
271
Watchers
27
Open Issues
77
Contributors
31
所有者種別
User
主要言語
TypeScript
ライセンス
MIT
リポジトリ最終更新
2024/10/11
関連記事を投稿する

このOSSの使い方や活用事例をMarkdownで投稿できます。管理者が承認した後に公開されます。

情報の誤りを報告

掲載内容に誤りや古い情報があればお知らせください。

このページを読んで、次に何をすればよいか分かりましたか？