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}
}

プロパティ

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

トークン

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

'#': {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="'###-####'" inputmode="numeric"/>

電話番号

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

注意点

Documentation: tel instead of date or text · Issue #27 · vuejs-tips/vue-the-mask

モバイル対応するためには、type属性をtelにする必要があるようです。

inputmode="numeric"で回避可能でした。

参考サイト

• vuejs-tips/vue-the-mask: Tiny (<2k gzipped) and dependency free mask input for Vue.js