마스크

SpreadJS는 스타일에 대한 마스크 설정을 지원하여 사용자 입력을 제한합니다.

다음 방법으로 셀의 마스크를 설정할 수 있습니다. 다음 정적 함수를 통해 패턴이 합법적인지 확인할 수 있습니다. 아래 설정에서 상세 정보를 확인할 수 있습니다. pattern (패턴) placeholder (자리 표시자) excludeLiteral (리터럴 제외) excludePlaceholder (자리 표시자 제외) 기본값: placeholder (자리 표시자): '_'
window.onload = function () { let spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { initSheet(spread); bindEvents(spread); } function initSheet (spread) { let sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.setValue(0, 0, 'Mask Cell'); sheet.setColumnWidth(0, 240); sheet.setValue(0, 1, 'Mask Pattern or Option'); sheet.setColumnWidth(1, 240); sheet.setValue(0, 2, 'Mask Description'); sheet.setColumnWidth(2, 240); let style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "a" }; sheet.setStyle(1, 0, style); sheet.setValue(1, 1, 'a'); sheet.setValue(1, 2, 'User must enter a letter.'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: ">" }; sheet.setStyle(2, 0, style); sheet.setValue(2, 1, '>'); sheet.setValue(2, 2, 'User must enter a letter and auto convert it to uppercase'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "<" }; sheet.setStyle(3, 0, style); sheet.setValue(3, 1, '<'); sheet.setValue(3, 2, 'User must enter a letter and auto convert it to lowercase.'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "0" }; sheet.setStyle(4, 0, style); sheet.setValue(4, 1, '0'); sheet.setValue(4, 2, 'User must enter a digit(0-9).'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "Au\\t\\hor: (Chris|Icey|Victor|Ian|Johnson|Ivan)" }; sheet.setStyle(5, 0, style); sheet.setValue(5, 1, 'Au\\t\\hor: (Chris|Icey|Victor|Ian|Johnson|Ivan)'); sheet.setValue(5, 2, '() Indicates that any one of the strings in () will match.'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "Br\\an\\d\\s: (Benz|BMW|Buick|BYD|Chevrolet|Dodge|Ford|Honda|Jeep|Mazda|Toyota|Volkswagen)" }; sheet.setStyle(6, 0, style); sheet.setValue(6, 1, 'Br\\an\\d\\s: (Benz|BMW|Buick|BYD|Chevrolet|Dodge|Ford|Honda|Jeep|Mazda|Toyota|Volkswagen)'); sheet.setValue(6, 2, '| Used within () and acts as a delimiter between strings.'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "[a0_]" }; sheet.setStyle(7, 0, style); sheet.setValue(7, 1, '[a0_]'); sheet.setValue(7, 2, 'For combine the keywords and literals as a whole'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "0{3}" }; sheet.setStyle(8, 0, style); sheet.setValue(8, 1, '0{3}'); sheet.setValue(8, 2, 'n repeats'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "0{2,4}" }; sheet.setStyle(9, 0, style); sheet.setValue(9, 1, '0{2,4}'); sheet.setValue(9, 2, 'From n to m repeats'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "0{,3}" }; sheet.setStyle(10, 0, style); sheet.setValue(10, 1, '0{,3}'); sheet.setValue(10, 2, 'Up to m repeats'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "0{3,}" }; sheet.setStyle(11, 0, style); sheet.setValue(11, 1, '0{3,}'); sheet.setValue(11, 2, 'At least n repeats'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "0{1,}.\\0\\0" }; sheet.setStyle(12, 0, style); sheet.setValue(12, 1, '0{1,}.\\0\\0'); sheet.setValue(12, 2, 'Escape Character'); 5 style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "000.000", placeholder: "-" }; sheet.setStyle(13, 0, style); sheet.setValue(13, 1, '000.000'); sheet.setValue(13, 2, 'placeholder: -'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "[a0]{8}", excludePlaceholder: true }; sheet.setStyle(14, 0, style); sheet.setValue(14, 1, '[a0]{8}'); sheet.setValue(14, 2, 'excludePlaceholder: true'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "Au\\t\\hor: (Chris|Icey|Victor|Ian|Johnson|Ivan)", excludeLiteral: true }; sheet.setStyle(15, 0, style); sheet.setValue(15, 1, 'Au\\t\\hor: (Chris|Icey|Victor|Ian|Johnson|Ivan)'); sheet.setValue(15, 2, 'excludeLiteral: true'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "[a0]{1,}@[a0]{1,}.(com|cn|gov|edu)" }; sheet.setStyle(16, 0, style); sheet.setValue(16, 1, '[a0]{1,}@[a0]{1,}.(com|cn|gov|edu)'); sheet.setValue(16, 2, 'email'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "><{1,} ><{1,}" }; sheet.setStyle(17, 0, style); sheet.setValue(17, 1, '><{1,} ><{1,}'); sheet.setValue(17, 2, 'name(First letter auto uppercase)'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "[>0]{5}" }; sheet.setStyle(18, 0, style); sheet.setValue(18, 1, '[>0]{5}'); sheet.setValue(18, 2, 'Verify Code, include letter and number, letter auto convert uppercase'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "yyyy/MM/dd" }; sheet.setStyle(19, 0, style); sheet.setValue(19, 1, 'yyyy/MM/dd'); sheet.setValue(19, 2, 'Date'); style = new GC.Spread.Sheets.Style(); style.mask = { pattern: "hh:mm:ss tt" }; sheet.setStyle(20, 0, style); sheet.setValue(20, 1, 'hh:mm:ss tt'); sheet.setValue(20, 2, 'Time'); sheet.resumePaint(); } function updateValidation (value) { let validation = document.getElementById('validation'); let validateResult = GC.Spread.Sheets.InputMask.validatePattern(value); if (!validateResult.success) { validation.innerText = validateResult.message || 'Invalid Pattern'; } else { validation.innerText = ''; } } function bindEvents (spread) { document.getElementById("set-mask").addEventListener('click', function () { set(spread); }); let pattern = document.getElementById('pattern'); pattern.addEventListener('keyup', function (event) { updateValidation(event.target.value); }); spread.bind(GC.Spread.Sheets.Events.SelectionChanged, function () { setSettings(spread); }); } function setSettings (spread) { let sheet = spread.getActiveSheet(); let activeCell = sheet.getCell(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); let mask = activeCell.mask(), pattern = '', placeholder = '', excludeLiteral = false, excludePlaceholder = false; if (mask) { pattern = mask.pattern || ''; placeholder = mask.placeholder || ''; excludeLiteral = mask.excludeLiteral || false; excludePlaceholder = mask.excludePlaceholder || false; } document.getElementById('pattern').value = pattern; document.getElementById('placeholder').value = placeholder; document.getElementById('excludeLiteral').checked = excludeLiteral; document.getElementById('excludePlaceholder').checked = excludePlaceholder; updateValidation(pattern); } function set (spread) { let sheet = spread.getActiveSheet(); let activeCell = sheet.getCell(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); let pattern = document.getElementById('pattern').value || undefined, placeholder = document.getElementById('placeholder').value || undefined, excludeLiteral = document.getElementById('excludeLiteral').checked, excludePlaceholder = document.getElementById('excludePlaceholder').checked; if (pattern && pattern[0] === "=") { pattern = GC.Spread.Sheets.CalcEngine.evaluateFormula(sheet, pattern); } activeCell.mask({ pattern, placeholder, excludeLiteral, excludePlaceholder }); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/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> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>Select a cell, then set mask for it.</p> <div class="settings-row"> <span id="validation"></span> </div> <div class="settings-row"> <label for="pattern">Pattern:</label><input type="text" id="pattern" class="settings-text"> </div> <div class="settings-row"> <label for="placeholder">Placeholder:</label><input type="text" id="placeholder" maxlength="1" class="settings-text"> </div> <div class="settings-row"> <label for="excludeLiteral">ExcludeLiteral:</label><input type="checkbox" class="settings-text" id="excludeLiteral"> </div> <div class="settings-row"> <label for="excludePlaceholder">ExcludePlaceholder:</label><input type="checkbox" class="settings-text" id="excludePlaceholder"> </div> <div class="settings-row"> <button id="set-mask" class="settings-btn">Set</button> </div> </div> </div> </body> </html>
.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; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } label { display: inline-block; width: 135px; } #validation { font-size: 10px; color: red; } .settings-row { width: 100%; height: 30px; font-size: 13px; } .settings-text { display: inline-block; width: 100px; } .settings-btn { display: inline-block; width: 100px; height: 30px; margin-left: 20px; }