クレジットカードは、カード会社によってカード番号の桁数や区切り位置が異なり、有効期限も「月/年」という日本語にはなじみの薄い表記ですが、InputManJSの利用によりユーザーにわかりやすい入力を促すことができます。ここでは以下の機能を実装しています。
カード会社の選択で、カード番号の書式を自動設定
ウォーターマークテキストでの入力内容の説明
入力内容に沿った文字種、書式
入力時と表示時で異なる書式（有効期限）
左右キーによるフォーカス移動
入力完了時の自動フォーカス移動
セキュリティコードのパスワード文字表示
ソフトウェアキーボード入力（セキュリティコードのみ）
import '@mescius/inputman/CSS/gc.inputman-js.css';
import './styles.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
// カードブランド
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,
autoSwitch: false
},
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>
window.onload = function() {
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;
}
body {
padding-bottom: 12rem;
}
[gcim-control-appearance="modern"] table.form {
border-collapse: collapse;
}
[gcim-control-appearance="modern"] table.form > tbody > tr > * {
padding: 0.25rem 0.5rem;
border: 1px solid #bee5eb;
}
[gcim-control-appearance="modern"] table.form > tbody > tr > th {
text-align: left;
background: #d1ecf1;
color: #0c5460;
font-weight: normal;
}
[gcim-control-appearance="modern"] .gcim {
border-color: #bee5eb;
width: 200px;
}
/* ウォーターマークのスタイル */
[gcim-control-appearance="modern"] .gcim_watermark_null {
color: #0c5460;
}
[gcim-control-appearance="modern"] .gcim-notify__tip-container {
margin-left: 16px;
}
[gcim-control-appearance="modern"] .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: {
'@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'
},
}
});
