Vue.jsでフォームにマスクを設定する方法 [vue-the-mask]

Vue.jsでフォームにマスクを設定する方法 [vue-the-mask]

郵便番号や電話番号を入力する際に、ハイフンを自動入力したい場合などがあります。vue-the-maskを使用してフォームにマスクを設定することでハイフンの自動入力などができるようになります。

デモ

インストール

vue-the-maskのインストールは下記のコマンドで行なえます。

$ npm i -S vue-the-mask

コンポーネントの登録

グローバルで利用する場合は、下記のコードを追加してください。

import VueTheMask from 'vue-the-mask'

Vue.use(VueTheMask)

ローカルコンポーネントとして利用する場合、下記のコードを使用してください。

import {TheMask} from 'vue-the-mask'

export default {
  components: {TheMask}
}

ローカルDirectiveとして利用する場合、下記のコードを使用してください。

import {mask} from 'vue-the-mask'

export default {
  directives: {mask}
}

プロパティ

コンポーネントでは以下のプロパティが使用可能です。

PropertyRequiredTypeDefaultDescription
valuefalseStringvalue または v-modelを使用できます
masktrueString, Arrayマクスパターン
maskedfalseBooleanfalseマクスされた入力値を受け取るかどうか
placeholderfalseStringplaceholder
typefalseString‘text’Input type (email, tel, number, …)
tokensfalseObjectカスタムトークンを設定できます
プロパティ一覧

トークン

デフォルトでは、下記のトークンが使用できます。

'#': {pattern: /\d/},
'X': {pattern: /[0-9a-zA-Z]/},
'S': {pattern: /[a-zA-Z]/},
'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
'!': {escape: true}

トークンを追加する場合は、下記のようになります。

例: Hexコード用トークン

<the-mask mask="FFFFFF" :tokens="hexTokens" />
hexTokens: {
  F: {
    pattern: /[0-9a-fA-F]/,
    transform: v => v.toLocaleUpperCase()
  }
}

サンプルコード

郵便番号

<input type="text" v-mask="'###-####'" />

電話番号

<input type="tel" v-mask="'###-####-####'" />

参考サイト