【Alpine.js】Maskを使ってinputの入力値を統一していくぞ

コイツを解説していく

MaskはAlpine.jsの拡張機能です。

Maskでできること

inputに入力する値の形式を統一することができます。

導入方法

CDNの方が楽な気がします。

CDN

HTMLファイルに張り付けるだけです。

<!-- Maskプラグイン -->
<script defer src="https://unpkg.com/@alpinejs/mask@3.x.x/dist/cdn.min.js"></script>

npm

まずnpmでインストール

npm install @alpinejs/mask

その後、バンドルするjsファイルにこう書きます。

import Alpine from 'alpinejs'
import mask from '@alpinejs/mask'
 
Alpine.plugin(mask)

これで使えます。

使用例

実際の公式ページで挙動を確認できるので確認してみてください。
（リンクのURLの表示が同じですが、それぞれ違うMaskへのリンクになっています。）

例①　日付の入力

input内の日付を「MM/DD/YYYY」に統一することができます。
しかも数字以外の入力を受け付けません。
設定すれば色々な日付表示にできるようです。

例②　電話番号の入力

電話番号は国や地域で入力値が違いますよね。
（東京の03-xxxx-xxxxや福岡の092-xxxx-xxxx、携帯電話の080-xxxx-xxxx、フリーダイヤルの0120-xxx-xxxなど）
Maskを使えば「0120の時はxxx-xxxの3桁区切り」「03の時はxxxx-xxxxの4桁区切り」といった具合で動的にinputの値を制限できます。

例③　金額の入力

金額を入力する時に自動的に3桁区切りで表示してくれます。
(123,567円みたいな感じ)

Alpine.jsが既に$moneyという関数を用意しているので、公式ページをコピペで使えてしまいます。

まとめ

ユーザーの入力の仕方に頼らずに入力値を統一できる！
便利すぎンゴ。