ダウンロード サンプルファイル (720.5 KB)
テキストボックスに入力できる文字の形式／種別を制限する - UI Mask
UI Maskを利用することで、テキストボックスに入力できる文字列の形式、それぞれの桁で入力できる文字種を制限できます。これによって、例えば郵便番号、電話番号、クレジットカードの番号、プロダクトキー／ライセンスキーなど、あらかじめ桁数と入力可能な文字種が決まっているような項目については、決められた文字しか入力できなくなるので入力ミスを事前に防げます。
また、ハイフン、カッコなど、データベース等に保存する際には不要な文字も入力時にはテキストボックス上に表示しておけますので、値の視認性も改善します。
UI Maskは、Bowerを利用することで、以下のコマンドで実行できます。
bower install --save angular-ui-mask
では、具体的な例もみてみましょう。以下は、プロダクトキー（仮に「99999-999999-99999-AA999」の形式とします）を入力させるためのテキストボックスの例です。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<script src="bower_components/angular/angular.min.js"></script>
<!-- （1）ライブラリ本体をインポート -->
<script src="bower_components/angular-ui-mask/dist/mask.min.js"></script>
<script src="scripts/mask.js"></script>
</head>
<body ng-controller="MyController">
<form>
<div>
<label for="pkey">プロダクトキー：</label>
<!-- （3）テキストボックスに各属性を指定 -->
<input id="pkey" type="text" size="10"
ng-model="product" ui-mask="99999-999999-99999-AA999" />
</div>
<!-- （4）入力値を反映 -->
{{product}}
</form>
</body>
</html>
// （2）ui.maskモジュールへの依存関係を設定
angular.module('myApp', ['ui.mask'])
.controller('MyController', ['$scope', function($scope) {
}]);
UI Maskを利用するには、ライブラリ本体（mask.js）をインポートした上で（1）、アプリモジュール（myApp）からはui.maskモジュールへの依存関係を設定してください（2）。
あとは、目的のテキストボックスに対して、以下の属性を指定するだけです（3）。
- ng-model属性：入力値を反映させるためのモデル
- ui-mask属性：入力可能な文字列のフォーマット／文字種
ng-mask属性で利用できる文字の種類と、その意味は以下の通りです。
| 文字 | 意味 |
|---|---|
| 9 | 任意の数字 |
| A | 任意のアルファベット |
| * | 任意の数値／アルファベット |
| その他 | 固定文字（入力できない） |
この例であれば、プロダクトキーの区切り文字である「-」は固定文字です。（4）に反映される結果を見ても判るように、固定文字の部分はモデルには反映されない点に注意してください。
この記事は参考になりましたか？
- AngularJSアプリ開発を支援する便利モジュール連載記事一覧
-
- AngularJSアプリに役立つ小粒なライブラリ ～ 可変パネル／CSV生成／カウントダウ...
- AngularJSアプリの入力生産性を向上する3種のライブラリ
- AngularJSアプリでイベントカレンダーを実装する - UI Bootstrap／UI...
- この記事の著者
-
WINGSプロジェクト（ウイングスプロジェクト）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
