Repolode
beholdr

beholdr/maska

Vue、Svelte、Alpine.js、バニラJavaScript向けの依存関係ゼロの入力マスクライブラリ。gzip圧縮時約3 KB。

スター
2,021
フォーク
78
未解決の Issue
6
最終コミット
23 日前

これは何?

Maskaは、ユーザーの入力に合わせてテキスト入力を整形し、電話番号や日付、カード番号などのパターンを適用します。実行時の依存関係はなく、プレーンなJavaScriptから使える小規模なライブラリとして提供されるほか、Vue 2/3、Alpine.js、Svelte向けの連携機能も備えています。

修飾子、変換関数、フックを使ったカスタムトークンでマスクを定義できます。動的マスク、逆方向のマスク、ユーザーが入力する前に固定文字を表示する eager マスクに対応しています。ネイティブの入力要素とカスタム入力コンポーネントのどちらでも使えます。

数値マスクモードでは、金額のような形式に整形できます。バージョン3では、Alpine.jsとSvelteとの連携機能、数値マスクモード、簡素化されたディレクティブ形式が追加されました。

主な機能

  • 01依存関係がなく、gzip圧縮時のサイズは約3 KB
  • 02Vue 2/3、Alpine.js、Svelteとの連携機能に加え、バニラJSにも対応
  • 03ネイティブおよびカスタムの入力コンポーネントで動作
  • 04修飾子、変換関数、フックを備えたカスタムトークン
  • 05金額の整形に使える数値マスクモード
  • 06動的マスク、逆方向のマスク、eager マスク

ユースケース

  • Vueのフォームで電話番号や日付を整形する
  • チェックアウトの入力欄に金額形式の数値整形を追加する
  • 追加の依存関係なしで、Alpine.jsやSvelteのアプリに固定形式のマスクを適用する

トピック

よくある質問

maska とは?
Vue、Svelte、Alpine.js、バニラJavaScript向けの依存関係ゼロの入力マスクライブラリ。gzip圧縮時約3 KB。 Maskaは、ユーザーの入力に合わせてテキスト入力を整形し、電話番号や日付、カード番号などのパターンを適用します。実行時の依存関係はなく、プレーンなJavaScriptから使える小規模なライブラリとして提供されるほか、Vue 2/3、Alpine.js、Svelte向けの連携機能も備えています。
maska は無料で使えますか?ライセンスは?
maska は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
maska は今もメンテナンスされていますか?
活発にメンテナンス中。maska の最終コミットは 2026年9月29日 です。
maska は何に使えますか?
Vueのフォームで電話番号や日付を整形する チェックアウトの入力欄に金額形式の数値整形を追加する 追加の依存関係なしで、Alpine.jsやSvelteのアプリに固定形式のマスクを適用する
maska はどこで入手できますか?
ソースコードとインストール手順は GitHub にあります:https://github.com/beholdr/maska

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト