GcMask型セルを作成するには、次の例のようなコードを使用します。
GcMask型セルの主なオプションは以下の通りです。オプションの完全なリストと機能の詳細については、InputManJSのAPIリファレンスやデモアプリケーションを参照してください。
formatPattern: 入力マスクとなる文字列を設定します。
displayType: セルの値に入力書式と同じ文字列を設定する場合は'text'を、リテラル文字列を含まない文字列を設定する場合は'value'を設定します。
autoConvert: 入力された文字をformatPatternオプションで設定した書式に従って自動的に変換するかどうかを設定します。
showSpinButton: コントロールにスピンボタンを表示します。
watermarkNullText: 未入力のときの代替テキストを設定します。
exitOnLastChar: 入力が終了したときに、自動的に次のセルへフォーカスを移動するかどうかを設定します。
window.onload = function () {
GC.InputMan.appearanceStyle = GC.InputMan.AppearanceStyle.Modern;
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'));
initSpread(spread);
};
function initSpread(spread) {
var sheet = spread.getSheet(0);
sheet.setColumnWidth(0, 200);
sheet.setColumnWidth(1, 200);
sheet.setRowHeight(2, 30);
sheet.setText(0, 1, 'B3セルにGcMask型セルが設定されています。');
sheet.setText(1, 1, ' ↓');
sheet
.getRange(2, 1, 1, 1)
.vAlign(GC.Spread.Sheets.VerticalAlign.center)
.setBorder(new GC.Spread.Sheets.LineBorder('orange', GC.Spread.Sheets.LineStyle.medium), { outline: true });
sheet.setText(4, 0, '右側のパネルの書式には、それぞれ以下のような書式が設定されています。');
sheet.setText(6, 0, '電話番号の定型書式：');
sheet.setText(7, 0, '郵便番号の定型書式：');
sheet.setText(8, 0, '半角大文字アルファベット：');
sheet.setText(9, 0, '全角カタカナ：');
sheet.setText(10, 0, '都道府県：');
sheet
.getRange(6, 0, 5, 1, GC.Spread.Sheets.SheetArea.viewport).hAlign(GC.Spread.Sheets.HorizontalAlign.right);
sheet.setText(6, 1, '℡:\\D{2,4}-\\D{2,4}-\\D{4}');
sheet.setText(7, 1, '〒\\D{3}-\\D{4}');
sheet.setText(8, 1, '\\A{5}');
sheet.setText(9, 1, '\\Ｋ*');
sheet.setText(10, 1, '(北海道|青森県|・・・|沖縄県)');
sheet.setText(12, 0, 'パネルで各プロパティを変更すると、B3セルのGcMask型セルに設定されます。');
sheet.setText(13, 0, '自由書式を設定して、任意のマスク書式を試すことができます。');
sheet.setText(14, 0, 'マスク書式で使用できるキーワードの詳細については、InputManJSのヘルプまたはオンラインデモをご参照ください。');
refresh(sheet);
var forms = 'formatPattern,displayTypeValue,autoConvert,showSpinButton,watermarkNullText,exitOnLastChar'.split(',');
for (var i = 0; i < forms.length; i++) {
document.getElementById(forms[i]).addEventListener('change', function(e) {
if (e.target.id =='formatPattern') {
document.getElementById('freeFormatPattern').value = '';
document.getElementById('showSpinButton').checked = (e.target.selectedIndex == 4);
} else if (e.target.id =='showSpinButton'){
if (e.target.checked) {
document.getElementById('formatPattern').selectedIndex = 4;
document.getElementById('freeFormatPattern').value = '';
}
}
refresh(sheet);
});
}
document.getElementById('setFreeFormat').addEventListener('click', function() {
document.getElementById('showSpinButton').checked = false;
refresh(sheet);
});
};
function refresh(sheet) {
let maskFormat = document.getElementById('freeFormatPattern').value;
if (maskFormat == '') {
maskFormat = document.getElementById('formatPattern').options[document.getElementById('formatPattern').selectedIndex].value;
}
var gcMaskCellType = new GC.Spread.Sheets.CellTypes.GcMaskCellType({
formatPattern: maskFormat,
displayType: document.getElementById('displayTypeValue').checked ? 'value' : 'text',
autoConvert: document.getElementById('autoConvert').checked,
showSpinButton: document.getElementById('showSpinButton').checked,
watermarkNullText: document.getElementById('watermarkNullText').checked ? '値を入力してください' : '',
exitOnLastChar: document.getElementById('exitOnLastChar').checked
});
sheet.setCellType(2, 1, gcMaskCellType);
sheet.setValue(2, 1, '');
sheet.setActiveCell(2, 1);
};
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta name="spreadjs culture" content="ja-jp" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@mescius/inputman/CSS/gc.inputman-js.css">
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ja/purejs/node_modules/@mescius/inputman/JS/gc.inputman-js.ja.js" type="text/javascript"></script>
<script src="https://cdn.mescius.com/inputmancelltype/hosted/scripts/gc.spread.sheets.inputmancelltype.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/inputman/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body style="position:absolute;top:0;bottom:0;left:0;right:0;">
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
<div class="options-container">
<label for="formatPattern">書式</label>
<select id="formatPattern">
<option value="℡:\D{2,4}-\D{2,4}-\D{4}">電話番号の定型書式</option>
<option value="〒\D{3}-\D{4}">郵便番号の定型書式</option>
<option value="\A{5}">半角大文字アルファベット</option>
<option value="\Ｋ{10}">全角カタカナ</option>
<option value="(北海道|青森県|岩手県|宮城県|秋田県|山形県|福島県|茨城県|栃木県|群馬県|埼玉県|千葉県|東京都|神奈川県|山梨県|長野県|新潟県|富山県|石川県|福井県|岐阜県|静岡県|愛知県|三重県|滋賀県|京都府|大阪府|兵庫県|奈良県|和歌山県|鳥取県|島根県|岡山県|広島県|山口県|徳島県|香川県|愛媛県|高知県|福岡県|佐賀県|長崎県|熊本県|大分県|宮崎県|鹿児島県|沖縄県)">都道府県</option>
</select><br><br>
<label for="freeFormatPattern">自由書式 <input type="text" id="freeFormatPattern"><br>
<button id="setFreeFormat">マスク書式を設定する</button></label><br><br>
<label><input id="displayTypeValue" type="checkbox">リテラル文字列を含まない値をセルに表示</label><br><br>
<label><input id="autoConvert" type="checkbox" checked>文字種を自動的に変換</label><br><br>
<label><input id="showSpinButton" type="checkbox">スピンボタン</label><br><br>
<label><input id="watermarkNullText" type="checkbox">未入力時の代替テキスト</label><br><br>
<label><input id="exitOnLastChar" type="checkbox">規定文字数の入力時に入力を確定</label>
</div>
</div>
</body>
</html>
/* ウォーターマークのスタイル */
.gcim_watermark_null {
color: lightgrey;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
overflow: auto;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
}
.option-row {
padding-bottom: 8px;
}
.gcim_input_helper {
border: none;
width: 0;
left: 0 !important;
top: 0 !important;
padding: 0;
margin: 0;
}
