書式の設定 | 数値コントロール | InputManJSデモアプリケーション | Developer Tools〈開発支援ツール〉

数値コントロールの特長的な機能である数値書式の設定と活用について解説します。概要の説明数値コントロールの書式は、下記の「入力書式」および「表示書式」で説明するメソッドにキーワードを設定することで、書式を作成します。 1.リテラル文字列数値コントロールには、キーワード以外の文字列をリテラル文字列として表示させることができます。ただし、リテラル文字列のみを設定することはできません。また、キーワードをリテラル文字として表示させるには、キーワードの前に円記号（\、Chr(92)）を付けます。円記号を表示させる場合は \ とします。 2. フィールド数値コントロールのフィールドには、次の２種類があります。これらのフィールドのほかにリテラル文字列を設定することもできます。整数部小数部 3. 入力と表示の桁数が異なる場合 setFormatDigitメソッドとsetDisplayFormatDigitメソッドの設定値は、互いの書式の桁数が異なる場合でも、getValueメソッドの値には影響を与えません。たとえば、setDisplayFormatDigitメソッドに設定された書式の小数部の桁数が、setFormatDigitメソッドの小数部の桁数よりも少ない場合、フォーカス喪失時に0として表示されることがあります。この場合でも、getValueメソッドには元の値が保持されます。入力書式数値コントロールの入力書式は、５つのメソッドにキーワードとリテラル文字列を設定することで、入力書式を作成します。メソッド説明 setFormatDigit 数値の桁数、および小数点と桁区切り記号の位置を設定します。リテラル文字列は設定できません。 setPositivePrefix 正の数値の前に配置する通貨記号などのリテラル文字を設定します。 setPositiveSuffix 正の数値の後に配置するリテラル文字を設定します。 setNegativePrefix 負の数値の前に配置する通貨記号や負号などのリテラル文字を設定します。また、'gcim gcim_gc-number_negative'クラスのスタイルで負の数値の表示色を設定することもできます。 setNegativeSuffix 負の数値の後に配置するリテラル文字を設定します。上記の各メソッドを空の文字列（''）に設定すると、数値コントロールの動作は次のようになります。デフォルトでは、setFormatDigit、setNegativePrefix以外のすべてのメソッドに空の文字列が設定されています。対象となるメソッド数値コントロールの動作 setFormatDigit setDisplayFormatDigitメソッドで設定した書式が適用されます。 setPositivePrefix 数値の前には何も表示されません。（通貨記号も表示されません） setPositiveSuffix 数値の後には何も表示されません。 setNegativePrefix 数値の前には何も表示されません。（負号も通貨記号も表示されません） setNegativeSuffix 数値の後には何も表示されません。入力書式で使用できるキーワードは以下のとおりです。なお、各キーワードは特定のメソッドでしか使用できません。各キーワードを使用できるメソッドは、下表内の「対象」に記載しています。キーワード説明 # 数値の桁を指定します。値が0の場合は何も表示されません。（対象：setFormatDigit） 0 数値の桁を指定します。値が0の場合は0を表示します。（対象：setFormatDigit） .（ピリオド）小数点の表示位置を指定するプレースホルダです。実際に表示される小数点は、setDecimalPointメソッドで設定します。（対象：setFormatDigit） ,（コンマ）桁区切り記号の表示位置を指定するプレースホルダです。実際に表示される桁区切り記号は、setSeparatorメソッドで設定します。（対象：setFormatDigit） $ 通貨記号の表示位置を指定するプレースホルダです。実際に表示される通貨記号は、setCurrencySymbolメソッドで設定します。（対象：PositivePrefix、NegativePrefix） \ キーワードをリテラル文字として表示させます。（対象：setFormatDigit以外のすべての有効なメソッド）以下に、setFormatDigitメソッドで設定可能な数値書式の設定例をいくつか上げます。書式表記例説明 ##.## 1010.199.99 整数部２桁、少数部２桁を表します。値が 0 の時は何も表示されません。 #0.## 010.199.99 整数部２桁、少数部２桁を表します。値が 0 の時は 0 が表示されます。 00 0099 整数部２桁を表します。値が１桁の場合には、十の位には 0 が表示されます。 ###,##0 0100,000 整数部６桁を表します。千の位には区切り記号が表示されます。表示書式数値コントロールの表示書式は、５つのメソッドにキーワードとリテラル文字列を設定することで、表示書式を作成します。メソッド説明 setDisplayFormatDigit 数値の桁数、および小数点と桁区切り記号の位置を設定します。リテラル文字列は設定できません。 setDisplayPositivePrefix 正の数値の前に配置する通貨記号などのリテラル文字を設定します。 setDisplayPositiveSuffix 正の数値の後に配置するリテラル文字を設定します。 setDisplayNegativePrefix 負の数値の前に配置する通貨記号や負号などのリテラル文字を設定します。また、'gcim gcim_gc-number_negative'クラスのスタイルで負の数値の表示色を設定することもできます。 setDisplayNegativeSuffix 負の数値の後に配置するリテラル文字を設定します。上記の各メソッドを空の文字列（''）に設定すると、数値コントロールの動作は次のようになります。デフォルトでは、setDisplayFormatDigit、setDisplayNegativePrefix以外のすべてのメソッドに空の文字列が設定されています。対象となるメソッド数値コントロールの動作 setDisplayFormatDigit setFormatDigitメソッドで設定した書式が適用されます。 setDisplayPositivePrefix 数値の前には何も表示されません。（通貨記号も表示されません） setDisplayPositiveSuffix 数値の後には何も表示されません。 setDisplayNegativePrefix 数値の前には何も表示されません。（負号も通貨記号も表示されません） setDisplayNegativeSuffix 数値の後には何も表示されません。表示書式で使用できるキーワードは以下のとおりです。なお、各キーワードは特定のメソッドでしか使用できません。各キーワードを使用できるメソッドは、下表内の「対象」に記載しています。キーワード説明 # 数値の桁を指定します。値が0の場合は何も表示されません。（対象：setDisplayFormatDigit） 0 数値の桁を指定します。値が0の場合は0を表示します。（対象：setDisplayFormatDigit） .（ピリオド）小数点の表示位置を指定するプレースホルダです。実際に表示される小数点は、setDisplayDecimalPointメソッドで設定します。（対象：setDisplayFormatDigit） ,（コンマ）桁区切り記号の表示位置を指定するプレースホルダです。実際に表示される桁区切り記号は、setDisplaySeparatorメソッドで設定します。（対象：setDisplayFormatDigit） [DBNum1]G 数値を漢数字で表示します。（例：一億二千三百四十五万六千七百八十九）（対象：setDisplayFormatDigit） [DBNum2]G 数字を漢数字（大字）で表示します。（例：壱億弐阡参百四拾伍萬六阡七百八拾九）（対象：setDisplayFormatDigit） [DBNum3]G 数字を漢数字と全角の数字を組み合わせて表示します。（例：１億２千３百４十５万６千７百８十９）（対象：setDisplayFormatDigit） [DBNum4]G 小数点以下の数字を漢数字を使って表示します。（例：〇.九分八厘七毛六糸五忽四微三纖二沙一塵）（対象：setDisplayFormatDigit） $ 通貨記号の表示位置を指定するプレースホルダです。実際に表示される通貨記号は、setCurrencySymbolメソッドで設定します。（対象：PositivePrefix、NegativePrefix） \ キーワードをリテラル文字として表示させます。（対象：setDisplayFormatDigit以外のすべての有効なメソッド）以下に、setDisplayFormatDigitメソッドで設定可能な数値書式の設定例をいくつか上げます。書式表記例説明 ##.## 1010.199.99 整数部２桁、少数部２桁を表します。値が 0 の時は何も表示されません。 #0.## 010.199.99 整数部２桁、少数部２桁を表します。値が 0 の時は 0 が表示されます。 00 0099 整数部２桁を表します。値が１桁の場合には、十の位には 0 が表示されます。 ###,##0 0100,000 整数部６桁を表します。千の位には区切り記号が表示されます。 ###.###[###:千] 123千12,345千下の３桁を文字列'千'に置き換えます。サンプルコード次のサンプルコードは、数値書式を設定する方法を示します。

import '@mescius/inputman/CSS/gc.inputman-js.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
const gcNumber = new InputMan.GcNumber(document.getElementById('gcNumber'), {
value: 10000,
// 表示書式の設定
displayFormatDigit: '##,##0',
displayPositivePrefix: '税込 ',
displayNegativePrefix: '税込 ▲',
displayPositiveSuffix: '円',
displayNegativeSuffix: '円',
// 入力書式の設定
formatDigit: '#####',
positivePrefix: '$',
negativePrefix: '-$',
positiveSuffix: '',
negativeSuffix: '',
// 記号などの設定
currencySymbol: '¥',
decimalPoint: '.',
separator: ',',
});
const initGcTextBox = () => {
var setCurrencySymbol = new InputMan.GcTextBox(document.getElementById('setCurrencySymbol'), {
text: '¥'
});
setCurrencySymbol.onTextChanged(() => {
gcNumber.setCurrencySymbol(setCurrencySymbol.getText());
});
var setDisplayPositivePrefix = new InputMan.GcTextBox(document.getElementById('setDisplayPositivePrefix'), {
text: '税込 '
});
setDisplayPositivePrefix.onTextChanged(() => {
gcNumber.setDisplayPositivePrefix(setDisplayPositivePrefix.getText());
});
var setDisplayPositiveSuffix = new InputMan.GcTextBox(document.getElementById('setDisplayPositiveSuffix'), {
text: '円'
});
setDisplayPositiveSuffix.onTextChanged(() => {
gcNumber.setDisplayPositiveSuffix(setDisplayPositiveSuffix.getText());
});
var setDisplayNegativePrefix = new InputMan.GcTextBox(document.getElementById('setDisplayNegativePrefix'), {
text: '税込 ▲'
});
setDisplayNegativePrefix.onTextChanged(() => {
gcNumber.setDisplayNegativePrefix(setDisplayNegativePrefix.getText());
});
var setDisplayNegativeSuffix = new InputMan.GcTextBox(document.getElementById('setDisplayNegativeSuffix'), {
text: '円'
});
setDisplayNegativeSuffix.onTextChanged(() => {
gcNumber.setDisplayNegativeSuffix(setDisplayNegativeSuffix.getText());
});
var readOnlyTextBox = new InputMan.GcTextBox(document.getElementById('readOnlyTextBox'), {
readOnly: true,
text: '（表示書式と同様）'
});
var setPositivePrefix = new InputMan.GcTextBox(document.getElementById('setPositivePrefix'), {
text: '$'
});
setPositivePrefix.onTextChanged(() => {
gcNumber.setPositivePrefix(setPositivePrefix.getText());
});
var setPositiveSuffix = new InputMan.GcTextBox(document.getElementById('setPositiveSuffix'), {
text: ''
});
setPositiveSuffix.onTextChanged(() => {
gcNumber.setPositiveSuffix(setPositiveSuffix.getText());
});
var setNegativePrefix = new InputMan.GcTextBox(document.getElementById('setNegativePrefix'), {
text: '-$'
});
setNegativePrefix.onTextChanged(() => {
gcNumber.setNegativePrefix(setNegativePrefix.getText());
});
var setNegativeSuffix = new InputMan.GcTextBox(document.getElementById('setNegativeSuffix'), {
text: ''
});
setNegativeSuffix.onTextChanged(() => {
gcNumber.setNegativeSuffix(setNegativeSuffix.getText());
});
};
initGcTextBox();
document.getElementById('setDisplayFormatDigit').addEventListener('change', (e) => {
gcNumber.setDisplayFormatDigit(e.target.value);
});
document.getElementById('setFormatDigit').addEventListener('change', (e) => {
gcNumber.setFormatDigit(e.target.value);
});

<!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="gcNumber">
<p>表示書式</p>
<table class="sample" style="margin-top: -1rem;">
<tr>
<th>書式</th>
<td>
<select id="setDisplayFormatDigit">
<option>#####</option>
<option>00000</option>
<option>##,###</option>
<option selected>##,##0</option>
<option>##,##0.##</option>
<option>##,##0.00</option>
</select>
</td>
<th>通貨記号</th>
<td><input type="text" id="setCurrencySymbol"></td>
</tr>
<tr>
<th>接頭書式[正数]</th>
<td><input type="text" id="setDisplayPositivePrefix"></td>
<th>接尾書式[正数]</th>
<td><input type="text" id="setDisplayPositiveSuffix"></td>
</tr>
<tr>
<th>接頭書式[負数]</th>
<td><input type="text" id="setDisplayNegativePrefix"></td>
<th>接尾書式[負数]</th>
<td><input type="text" id="setDisplayNegativeSuffix"></td>
</tr>
</table>
<p>入力書式</p>
<table class="sample" style="margin-top: -1rem;">
<tr>
<th>書式</th>
<td>
<select id="setFormatDigit">
<option>#####</option>
<option>00000</option>
<option>##,###</option>
<option>##,##0</option>
<option>##,##0.##</option>
<option>##,##0.00</option>
</select>
</td>
<th>通貨記号</th>
<td><input type="text" id='readOnlyTextBox'></td>
</tr>
<tr>
<th>接頭書式[正数]</th>
<td><input type="text" id="setPositivePrefix"></td>
<th>接尾書式[正数]</th>
<td><input type="text" id="setPositiveSuffix"></td>
</tr>
<tr>
<th>接頭書式[負数]</th>
<td><input type="text" id="setNegativePrefix"></td>
<th>接尾書式[負数]</th>
<td><input type="text" id="setNegativeSuffix"></td>
</tr>
</table>
</body>
</html>

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'
},
}
});