クレジットカード入力

クレジットカードは、カード会社によってカード番号の桁数や区切り位置が異なり、有効期限も「月/年」という日本語にはなじみの薄い表記ですが、InputManJSの利用によりユーザーにわかりやすい入力を促すことができます。ここでは以下の機能を実装しています。 カード会社の選択で、カード番号の書式を自動設定 ウォーターマークテキストでの入力内容の説明 入力内容に沿った文字種、書式 入力時と表示時で異なる書式(有効期限) 左右キーによるフォーカス移動 入力完了時の自動フォーカス移動 セキュリティコードのパスワード文字表示 ソフトウェアキーボード入力(セキュリティコードのみ)
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import { InputMan } from '@grapecity/inputman'; // カードブランド const cardType = new InputMan.GcComboBox(document.getElementById('cardType'), { items: ['VISA', 'MasterCard', 'JCB', 'AmericanExpress', 'Diners Club'], watermarkDisplayNullText: '選択してください。', isEditable: false, exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both, exitOnEnterKey: InputMan.ExitKey.Both }); cardType.addEventListener(InputMan.GcComboBoxEvent.TextChanged, (control, args) => { cardNumber.formatPattern = cardNoFormats[cardType.displayText]; }); // カード番号のマスク書式 const cardNoFormats = { VISA: '\\D{4}-\\D{4}-\\D{4}-\\D{4}', MasterCard: '\\D{4}-\\D{4}-\\D{4}-\\D{4}', JCB: '\\D{4}-\\D{4}-\\D{4}-\\D{4}', AmericanExpress: '\\D{4}-\\D{6}-\\D{5}', 'Diners Club': '\\D{4}-\\D{6}-\\D{4}' }; // カード番号 const cardNumber = new InputMan.GcMask(document.getElementById('cardNumber'), { watermarkDisplayNullText: '半角数字を入力してください。', formatPattern: cardNoFormats.VISA, exitOnLastChar: true, exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both, exitOnEnterKey: InputMan.ExitKey.Both }); // カード名義 const ownerName = new InputMan.GcTextBox(document.getElementById('ownerName'), { watermarkDisplayNullText: '半角英字を入力してください。', format: 'AS', exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both, exitOnEnterKey: InputMan.ExitKey.Both }); // 有効期限 var today = new Date(); var thisYear = today.getFullYear(); var thisMonth = today.getMonth(); const expirationDate = new InputMan.GcDateTime(document.getElementById('expirationDate'), { watermarkDisplayNullText: '年月を入力してください。', formatPattern: 'yyyy年MM月', displayFormatPattern: 'MM/yy', exitOnLastChar: true, exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both, exitOnEnterKey: InputMan.ExitKey.Both, showDropDownButton: true, dropDownConfig: { dropDownType: InputMan.DateDropDownType.Calendar, calendarType: InputMan.CalendarType.YearMonth }, minDate: new Date(thisYear, thisMonth, 1), maxDate: new Date(thisYear + 5, 11, 31) }); expirationDate.value = null; // セキュリティコード const securityCode = new InputMan.GcTextBox(document.getElementById('securityCode'), { watermarkDisplayNullText: '3~4桁の数値です。', maxLength:4, format:'9', exitOnLastChar: true, exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both, exitOnEnterKey: InputMan.ExitKey.Both, passwordChar : '*', passwordRevelationMode:InputMan.PasswordRevelationMode.ShowLastTypedChar, }); securityCode.addDropDownSoftKeyboard(null, { displayType: InputMan.DisplayType.Numeric }, true); // 検証処理 const validator = new InputMan.GcValidator({ items: [ // カードブランド { control: cardType, ruleSet: [ { rule: InputMan.ValidateType.Required, failMessage: 'カードブランドを選択してください' } ] }, // カード番号 { control: cardNumber, ruleSet: [ { rule: InputMan.ValidateType.Required, failMessage: 'カード番号を入力してください' } ] }, // カード名義 { control: ownerName, ruleSet: [ { rule: InputMan.ValidateType.Required, failMessage: '名前を入力してください' } ] }, // 有効期限 { control: expirationDate, ruleSet: [ { rule: InputMan.ValidateType.Required, failMessage: '日付を入力してください' } ] }, // セキュリティコード { control: securityCode, ruleSet: [ { rule: InputMan.ValidateType.Required, failMessage: '数値を入力してください' } ] } ], defaultNotify: { tip: { template: '<div style="color:red;min-width:20rem;">{!message}</div>' } } }); validator.validate();
<!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> System.import('./src/app'); </script> </head> <body> <table class="form"> <tr> <th>カードブランド</th> <td><select id="cardType"></select></td> </tr> <tr> <th>カード番号</th> <td><input id="cardNumber"></td> </tr> <tr> <th>カード名義</th> <td><input id="ownerName"></td> </tr> <tr> <th>有効期限</th> <td><input id="expirationDate"></td> </tr> <tr> <th>セキュリティコード</th> <td><input id="securityCode"></td> </tr> </table> </body> </html>
body { padding-bottom: 12rem; } table.form { border-collapse: collapse; } table.form > tbody > tr > * { padding: 0.25rem 0.5rem; border: 1px solid #bee5eb; } table.form > tbody > tr > th { text-align: left; background: #d1ecf1; color: #0c5460; font-weight: normal; } .gcim { border-color: #bee5eb; width: 200px; } /* ウォーターマークのスタイル */ .gcim_watermark_null { color: #0c5460; } .gcim-notify__tip-container { margin-left: 16px; } .gcim__soft-keyboard{ width: 400px; }
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: { '@grapecity/inputman': 'npm:@grapecity/inputman/index.js', '@grapecity/inputman/CSS': 'npm:@grapecity/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' }, } });