マスクコントロールの特長的な機能である入力マスクの設定と活用について解説します。
書式の設定
マスクコントロールの書式は、setFormatPatternメソッドに以下の要素からなる文字列を設定することで、マスクを作成します。
setFormatPatternメソッドを空の文字列''に設定すると、書式が制限されず自由入力が可能になります。なお、setFormatPatternメソッドでは、以下の表現が使用できます。
表現のタイプ
説明
8進数(ASCII)
ASCII文字を表現するときだけ使用します。「\040」のように、頭に0をつけて必ず3桁の数値で表現します。
16進数(ASCII)
ASCII文字を表現するときだけ使用します。「\x20」のように、\xに続いて必ず2桁の数値(頭に0を付ける)で表現します。
16進数(Unicode)
すべての文字を表現できます。「\u0020」のように、\uに続いて必ず4桁の数値(頭に0を付ける)で表現します。
キーワード
下表で説明するキーワード(メタ文字)です。
リテラル文字
キーワード以外の文字です。
書式設定のキーワード
マスクコントロールの書式は、setFormatPatternメソッドに、以下のような正規表現のキーワード(メタ文字)を使用して設定します。 ここでは、キーワードを主要なものと補助的なものに分けて解説します。
1. 主要なキーワード
半角
全角
説明
\A
\A
大文字のアルファベットを表します。[A-Z]または[A-Z]と同等です。
\a
\a
子文字のアルファベットを表します。[a-z]または[a-z]と同等です。
\D
\D
数字を表します。[0-9]または[0-9]と同等です。
\B
\B
2進数を表します。[0-1]または[0-1]と同等です。
\X
\X
16進数を表します。[0-9A-Fa-f]または[0-9A-Fa-f]と同等です。
\W
\W
すべての英数字を表します。[a-zA-Z_0-9]または[a-zA-Z_0-9]と同等です。
\K
\K
カタカナ(促音・拗音の小書き表記あり)を表します。
\N
\N
カタカナ(促音・拗音の小書き表記なし)を表します。
\H
-
すべての半角文字を表します。
-
\J
ひらがな(促音・拗音の小書き表記あり)を表します。
-
\G
ひらがな(促音・拗音の小書き表記なし)を表します。
-
\Z
すべての全角文字を表します。
-
\T
サロゲート ペア文字を表します。
-
\I
JIS X 0208で構成された文字を表します。
-
\M
Shift JISで構成された文字を表します。
-
\V
IVS(Ideographic Variation Sequence)文字を表します。
2. 補助的なキーワード
メタ文字
説明
[]
[]内の文字のどれか1つにマッチすることを表します。
^
[]内で使用し、その後に続く文字グループの補集合をあらわします。
-
[]内で使用し、文字の範囲を指定します。
()
()内の文字列のどれか1つにマッチすることを表します。
|
()内で使用し、文字列間の区切り文字として機能します。
{n}
直前のキーワードのn回の繰り返しを表します。
{n,}
直前のキーワードのn回以上の繰り返しを表します。
{n,m}
直前のキーワードのn回以上でm回以下の繰り返しを表します。
*
直前のキーワードの0回以上の繰り返しを表します。{0,}と同等です。
+
直前のキーワードの1回以上の繰り返しを表します。{1,}と同等です。
?
直前のキーワードの0回または1回の繰り返しを表します。{0,1}と同等です。
\(Chr(92))
キーワードをリテラル文字として表示
以下に、正規表現のを使用した書式の表記例をいくつか上げます。(表記例が複数ある場合は、カンマ(,)で区切って表記しています。)
書式
表記例
説明
[]
A,a,ア,1,A,a,あ,ア,1
すべての文字を表します。[\Z\H]と同等です。
[^]
どの文字も当てはまりません。[^\Z\H]と同等です。
[^\W]
1, A, a, あ
全角の英数文字以外を表します。
[\D^123]
4, 5, 6
1、2、3を除く半角の数字を表します。
[\Z^\T]
あ、い、う
サロゲート ペア文字を除くすべての全角文字を表します。
[A-Z]
A, B, C, X, Y, Z
すべての全角大文字アルファベットを表します。\Aと同等です。
[\u0000-Z]
0, 9, a, Z
範囲設定のときに異種の表現が使えます。Unicode文字 0000 から全角Zまでを表します。
[\u0000\Kaeiou0-9]
ア, a, o, 0
異種の表現を組み合わせることが可能です。Unicode文字 0000、半角カタカナ、a、e、i、o、u、半角数字を表します。
(A1|B2|C3)
A1, B2, C3
()内の文字列のどれか1つにマッチすることを表します。
\D{3,}
123, 12345, 999999
半角数字が3回以上の繰り返しを表します。
\[0-9]
\0
'\' をリテラル文字として扱う例です。
リテラル文字とフィールド
マスクコントロールには、リテラル文字列を設定し、表示させることができます。通常、入力マスクはキーワードとリテラル文字列を組み合わせて作成します。たとえば、郵便番号用の入力マスクを作成する場合は、次のように設定します。
リテラル文字列として指定できるのは、上述したキーワード以外の文字列です。ただし、リテラル文字列のみをsetFormatPatternメソッドに設定することはできません。また、キーワードをリテラル文字として表示させるには、キーワードの前に円記号(\、Chr(92))を付けます。円記号を表示させる場合は \ とします。
なお、setShowLiteralsメソッドを使えば、入力中にリテラル文字列を表示するかどうかを指定できます。
また、フィールドとは、リテラル文字列で区切られた入力領域の単位です。リテラル文字列の領域はフィールドではありません。たとえば、setFormatPatternメソッドに'〒 \D{3}-\D{4}'と設定した場合、2つのフィールドが作成されたことになり、左から順に\D{3}が第1フィールド、\D{4}が第2フィールドとなります。なお、setFormatPatternメソッドに空の文字列を設定すると、フィールド数は1となります。
文字列の自動変換
setAutoConvertメソッドをtrueに設定すると、setFormatPatternメソッドの設定内容に基づいて、変換可能な文字はすべて自動的に変換されます。たとえば、setFormatPatternメソッドで'\A{8}'のように設定されていると、小文字を入力しても自動的に大文字に変換されます。また、全角文字だけが許可されている場合は、入力された半角文字は全角文字に変換されます。
コントロール内部で行われる自動変換の手順を以下に示します。
小文字から大文字、または大文字から小文字への変換を行います。
手順1の変換が行われない場合、全角から半角、または半角から全角への変換を行います。
手順2の変換が行われない場合、全角大文字から半角小文字、全角小文字から半角大文字、半角大文字から全角小文字、半角小文字から全角大文字のいずれかの変換を行います。
半角カタカナ、全角カタカナ、およびひらがなは、次のように変換されます。
半角カタカナは全角カタカナに変換。変換できない場合はひらがなに変換。
全角カタカナは半角カタカナに変換。変換できない場合はひらがなに変換。
ひらがなは全角カタカナに変換。変換できない場合は半角カタカナに変換。
setFormatPatternメソッドに'^V'(IVS文字を除外する)が設定された場合、IVS文字およびIVSの親となる漢字(親字)は次のように変換されます。
IVS文字は親字に変換されます。 辻󠄀→辻
親字はそのまま入力されます。 辻→辻
import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman';
import './styles.css';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcMask = new InputMan.GcMask(document.getElementById('gcMask'));
const formatPattern = new InputMan.GcComboBox(document.getElementById('formatPattern'), {
items: [
{ value: '℡:\\D{2,4}-\\D{2,4}-\\D{4}', desc: '電話番号の定型書式' },
{ value: '〒\\D{3}-\\D{4}', desc: '郵便番号の定型書式' },
{ value: '製造番号:\\A{3}\\D{8}', desc: '異なる文字種の組み合わせ' },
{ value: '[\\D^123]{3,10}', desc: '「1,2,3」以外で3~10文字の半角数字の入力を許可' },
{ value: '[^\\J]{0,5}', desc: 'ひらがな以外の入力を5文字まで許可' },
{ value: '[\\Z^\\T]{0,}', desc: 'サロゲートペア文字以外の全角文字の入力を許可' },
],
columns: [
{ name: 'value', label: '値', width: 180 },
{ name: 'desc', label: '説明', width: 350 }
],
dropDownWidth: 'auto',
displayMemberPath: 'value',
valueMemberPath: 'value'
});
formatPattern.addEventListener(InputMan.GcComboBoxEvent.SelectedChanged, (control, args) => {
if (formatPattern.getSelectedValue()) {
gcMask.setFormatPattern(formatPattern.getSelectedValue());
}
});
formatPattern.addEventListener(InputMan.GcComboBoxEvent.TextChanged, (control, args) => {
gcMask.setFormatPattern(formatPattern.getDisplayText());
});
document.getElementById('setAutoConvert').addEventListener('change', (e) => {
gcMask.setAutoConvert(e.target.checked);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>マスクコントロール - 書式の設定</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function() {
System.import('./src/app');
}
</script>
</head>
<body>
<input id="gcMask">
<table class="sample">
<tr>
<th>書式の設定</th>
<td>
<select id="formatPattern"></select>
</td>
</tr>
<tr>
<th>自動変換</th>
<td>
<label><input type="checkbox" checked id="setAutoConvert">指定した文字種にあわせて自動的に変換する</label>
</td>
</tr>
</table>
</body>
</html>
body {
padding-bottom: 10rem;
}
.combobox-input.gcim-layout {
width: 250px;
}
body {
padding-bottom: 10rem;
}
[gcim-control-appearance="modern"] .combobox-input.gcim-layout {
width: 250px;
}
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});