マスク型セル

マスク型セルを使用すると、電話番号や郵便番号などの入力マスクを定義して、入力できる文字の書式を制限することができます。

<p>マスク型セルを作成するには、次の例のようなコードを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> gcMaskCellType = <span class="hljs-keyword">new</span> GC.Spread.Sheets.CellTypes.GcMaskCellType({ <span class="hljs-attr">formatPattern</span>: <span class="hljs-string">'℡:\D{2,4}-\D{2,4}-\D{4}'</span> }); sheet.setCellType(<span class="hljs-number">0</span>, <span class="hljs-number">1</span>, gcMaskCellType); </code></pre> <p>マスク型セルの主なオプションは以下の通りです。オプションの完全なリストと機能の詳細については、InputManJSの製品ヘルプやデモアプリケーションを参照してください。</p> <ul> <li><strong>formatPattern: 入力マスクとなる文字列を設定します。</strong></li> <li><strong>displayType: セルの値に入力書式と同じ文字列を設定する場合は'text'を、リテラル文字列を含まない文字列を設定する場合は'value'を設定します。</strong></li> <li><strong>autoConvert: 入力された文字をformatPatternオプションで設定した書式に従って自動的に変換するかどうかを設定します。</strong></li> <li><strong>showSpinButton: コントロールにスピンボタンを表示します。</strong></li> <li><strong>watermarkNullText: 未入力のときの代替テキストを設定します。</strong></li> <li><strong>exitOnLastChar: 入力が終了したときに、自動的に次のセルへフォーカスを移動するかどうかを設定します。</strong></li> </ul>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); initSpread(spread); }; function initSpread(spread) { var sheet = spread.getSheet(0); sheet.setColumnWidth(0, 150); sheet.setColumnWidth(1, 200); sheet.setValue(0, 0, 'マスク型セル'); refresh(sheet); var forms = 'formatPattern,displayTypeValue,autoConvert,showSpinButton,watermarkNullText,exitOnLastChar'.split(','); for (var i = 0; i < forms.length; i++) { document.getElementById(forms[i]).addEventListener('input', function() { refresh(sheet); }); } }; function refresh(sheet) { if (document.getElementById('showSpinButton').checked) { document.getElementById('formatPattern').selectedIndex = 4; } var gcMaskCellType = new GC.Spread.Sheets.CellTypes.GcMaskCellType({ formatPattern: document.getElementById('formatPattern').options[document.getElementById('formatPattern').selectedIndex].value, 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(0, 1, gcMaskCellType); };
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <link rel="stylesheet" type="text/css" href="https://cdn.grapecity.com/inputmanjs/hosted/css/gc.inputman-js.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/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$/spread/source/js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="https://cdn.grapecity.com/inputmanjs/hosted/scripts/gc.inputman-js.ja.js" type="text/javascript"></script> <script src="https://cdn.grapecity.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="\K{10}">全角カタカナ</option> <option value="(北海道|青森県|岩手県|宮城県|秋田県|山形県|福島県|茨城県|栃木県|群馬県|埼玉県|千葉県|東京都|神奈川県|山梨県|長野県|新潟県|富山県|石川県|福井県|岐阜県|静岡県|愛知県|三重県|滋賀県|京都府|大阪府|兵庫県|奈良県|和歌山県|鳥取県|島根県|岡山県|広島県|山口県|徳島県|香川県|愛媛県|高知県|福岡県|佐賀県|長崎県|熊本県|大分県|宮崎県|鹿児島県|沖縄県)">都道府県</option> </select><br><br> <label><input id="displayTypeValue" type="checkbox">リテラル文字列を含まない値をセルに表示<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">未入力時の代替テキスト<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; }