「Wijmo（ウィジモ）」は業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリです。
Wijmoには業務アプリケーションに欠かせない入力機能を幅広くカバーする入力コントロール群「Input（インプット）」が含まれています。この記事では、その中から「InputMask（インプットマスク）」と「InputNumber（インプットナンバー）」の基本的な使い方を紹介します。
開発環境の準備とWijmoの参照
この記事では以下の開発環境を使用します。
作成するファイルは次の3つです。
| index.html | ページ本体。このページの要素としてInputMaskとInputNumberを配置します |
|---|---|
| app.js | InputMaskとInputNumberを作成するコードを記載します |
| styles.css | 各種ページ要素のスタイル定義を記載します |
入力コントロールの機能を使うために必要となるWijmoのモジュールなどへの参照設定は「index.html」で行います。また、input要素を以下のように追加し、後ほどInputMask、及びInputNumberの処理を組み込んでいきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Inputコントロール入門</title>
<link rel="stylesheet" type="text/css" href="css/wijmo.min.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="scripts/wijmo.min.js"></script>
<script src="scripts/wijmo.input.min.js"></script>
<script src="scripts/cultures/wijmo.culture.ja.min.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<div>
<div>
<label for="Wijmo_InputMask" class="control">InputMask</label>
<div id="Wijmo_InputMask"></div><br>
<label for="overwrite">上書き</label>
<input id="overwrite" type="checkbox"><br>
<label for="maskfull">入力完了の確認</label>
<input id="maskfull" type="checkbox"><br>
</div>
<hr>
<div>
<label for="Wijmo_InputNumber" class="control">InputNumber</label>
<div id="Wijmo_InputNumber"></div><br>
<label for="min">最小値</label>
<input id="min" type=number value="0"><br>
<label for="max">最大値</label>
<input id="max" type=number value="9999"><br>
<label for="spin">スピンの許可</label>
<input id="spin" type="checkbox"><br>
<label for="step">増減値</label>
<input id="step" type=number value="0"><br>
</div>
</div>
</body>
</html>
ページ上のラベルなどの要素のスタイルを「styles.css」で定義します。
label {
display: block;
float: left;
margin-right: 15px;
text-align: right;
width: 150px;
}
.state-invalid {
color: red;
}
.control {
color:blue;
font-weight:bold;
}InputMaskコントロールを作成する
それでは「index.html」「app.js」に次のようなコードを記述してInputMaskコントロールを作成しましょう。ここでは5桁の半角数字と5桁の半角カタカタを入力するマスクを設定しています。
document.addEventListener("DOMContentLoaded", function () {
//【InputMaskコントロールの作成】
const mask = new wijmo.input.InputMask('#Wijmo_InputMask', {
isRequired: false,
mask: '00000-KKKKK',
placeholder: '数字5桁＋ｶﾀｶﾅ5桁（半角）',
value: ''
});
// valueChangedイベントのハンドラの設定：入力完了まで赤字で表示
mask.valueChanged.addHandler(function (sender) {
if(document.querySelector('#maskfull').checked){
wijmo.toggleClass(sender.hostElement, 'state-invalid', !sender.maskFull);
}else{
wijmo.toggleClass(sender.hostElement, 'state-invalid', false);
}
});
// 上書きの切り替え
document.querySelector('#overwrite').addEventListener('click', e => {
mask.overwriteMode = e.target.checked;
});
});
InputMaskコントロールで使用しているプロパティとイベントの機能は次のとおりです。
| mask | 入力マスク |
|---|---|
| maskFull | 入力完了の判別 |
| isRequired | 空文字列の禁止／許可 |
| overwriteMode | 上書きモード |
| placeholder | 未入力時に表示する文字列 |
| value | 表示文字列（リテラル文字を含む） |
| valueChanged | 文字列の変更時に発生するイベント |
InputMaskコントロールでは、maskプロパティを使って入力可能な文字種と文字数を指定します。設定可能な文字種やプロパティの詳細についてはAPIリファレンスを参照してください。
このサンプルでは「上書き」チェックボックスがチェックされたときにoverwriteModeプロパティをtrueにして、挿入モード（既定値）を上書きモードに切り替えるようにしています。
また、「入力完了の確認」チェックボックスをチェックすると、入力が完了するまでは文字列を赤色にし、入力が完了した時点で既定の黒色に戻るようになります。この処理には、maskFullプロパティとvalueChangedイベントを使っています。ここで、Wijmoイベントハンドラの追加と削除はヘルプに記載しているように、addEventListenerメソッドとremoveEventListnerメソッドではなく、addHandlerメソッドとremoveHandlerメソッドを使用します。
マスク入力が未完了の場合は文字列が赤色で表示されます。このときの色はCSSの「.state-invalid」で指定しています。
マスク入力が完了した時点で文字列が黒色に変化します。
InputNumberコントロールを作成する
次に「app.js」に次のコードを追加してInputNumberコントロールを作成します。
document.addEventListener("DOMContentLoaded", function () {
//【InputMaskコントロールの作成】
・・・（中略）
//【InputNumberコントロールの作成】
const number = new wijmo.input.InputNumber('#Wijmo_InputNumber', {
format: 'C0',
isRequired: false,
min: Number(document.querySelector('#min').value),
max: Number(document.querySelector('#max').value),
placeholder: '通貨書式（整数）',
value: null
});
// 最小値と最大値の設定
document.querySelector('#min').onchange = function(){
number.min = Number(document.querySelector('#min').value);
}
document.querySelector('#max').onchange = function(){
number.max = Number(document.querySelector('#max').value);
}
// スピン操作の許可
document.querySelector('#spin').addEventListener('click', e => {
if(e.target.checked){
if(Number(document.querySelector('#step').value) < 1){
document.querySelector('#step').value = 1;
}
}else{
document.querySelector('#step').value = 0;
}
number.step = Number(document.querySelector('#step').value);
});
document.querySelector('#step').onchange = function(){
if(document.querySelector('#spin').checked){
number.step = Number(document.querySelector('#step').value);
}
}
});
InputNumberコントロールで使用しているプロパティの機能は次のとおりです。
| format | 数値書式 |
|---|---|
| max | 入力可能な最大値 |
| min | 入力可能な最小値 |
| step | スピン操作時の増減量 |
| isRequired | 空文字列の禁止／許可 |
| placeholder | 未入力時に表示する文字列 |
| value | コントロールの値（数値またはnull） |
InputNumberコントロールでは、数値書式をはじめ、入力可能な最大値／最小値やスピン操作による増減量を指定することができます。
数値書式を指定するformatプロパティには標準の数値書式指定文字列を設定します。カスタム数値形式文字列には対応していませんので、注意してください。また、スピン機能を有効にするにはshowSpinnerプロパティをtrue（既定値）にして、stepプロパティを0以外の値に設定します。
このサンプルでは「スピンの許可」チェックボックスがチェックされたときに「増減値」テキストボックスに入力されている値をstepプロパティに設定することで、スピン機能を有効にしています。
InputNumberクラスで利用可能な機能についてAPIリファレンスをご一読いただければと思います。
今回ご紹介した各種設定は以下のデモアプリケーションでも確認できます（“Run Project”をクリックするとデモが起動します）。
さいごに
今回はWijmoに含まれている入力コントロールのInputMaskとInputNumberの基本的な使用方法を紹介いたしました。Wijmoには、これらに加えてコンボボックス、リストボックス、複数選択、カレンダー、日付入力、オートコンプリートなど、高機能な入力コントロールが豊富に用意されているので、Webアプリケーションの入力作業を効率化する際にはぜひご検討いただけますと幸いです。
この他にもWijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。
製品サイトでは、Wijmoの機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。
また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。