氏名や住所など、基本的なユーザー情報の入力画面には、自動入力、フォーカス移動、エラーチェックなどのInputManの機能を活用できます。ここでは以下の機能を実装しています。快適な入力操作をお試しください。
入力内容に沿った文字種、書式
ふりがなの自動入力
左右キーによるフォーカス移動
入力完了時の自動フォーカス移動
import '@mescius/inputman/CSS/gc.inputman-js.css';
import './styles.css';
import { InputMan } from '@mescius/inputman';
InputMan.appearanceStyle = InputMan.AppearanceStyle.Modern;
// 社員番号
const id = new InputMan.GcNumber(document.getElementById('id'), {
formatDigit: '00000',
displayFormatDigit: '00000',
showNumericPad: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '社員番号',
floatingLabelDirection: 'ThroughBorder',
width: 200
});
// 氏名漢字
const fullname = new InputMan.GcTextBox(document.getElementById('fullname'), {
IMEReadingStringKanaMode: InputMan.KanaMode.Katakana,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '氏名漢字',
floatingLabelDirection: 'ThroughBorder',
width: 200
});
fullname.onIMEReadingStringOutput((sender, args) => {
kana.text = args.readingString;
});
// フリガナ
const kana = new InputMan.GcTextBox(document.getElementById('kana'), {
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: 'フリガナ',
floatingLabelDirection: 'ThroughBorder',
width: 200
});
// 郵便番号
const postal = new InputMan.GcMask(document.getElementById('postal'), {
formatPattern: '〒\\D{3}-\\D{4}',
exitOnLastChar: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '郵便番号',
floatingLabelDirection: 'ThroughBorder',
width: 200
});
// 住所
const address = new InputMan.GcTextBox(document.getElementById('address'), {
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '住所',
floatingLabelDirection: 'ThroughBorder',
width: 400
});
// 電話番号
const tel = new InputMan.GcMask(document.getElementById('tel'), {
formatPattern: '\\D{2,4}-\\D{2,4}-\\D{4}',
exitOnLastChar: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '電話番号',
floatingLabelDirection: 'ThroughBorder',
width: 200
});
// 生年月日
const birthday = new InputMan.GcDateTime(document.getElementById('birthday'), {
formatPattern: 'yyy/M/d',
displayFormatPattern: '',
exitOnLastChar: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
value: null,
showDropDownButton: true,
floatingLabelText: '生年月日',
floatingLabelDirection: 'ThroughBorder',
dropDownConfig: {
dropDownType: InputMan.DateDropDownType.Calendar
},
width: 200
});
// 部署名
const department = new InputMan.GcComboBox(document.getElementById('department'), {
items: ['総務部', '企画部', '情報システム部'],
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '部署名',
floatingLabelDirection: 'ThroughBorder',
width: 200
});
// 内線
const extension = new InputMan.GcNumber(document.getElementById('extension'), {
formatDigit: '000',
displayFormatDigit: '000',
showNumericPad: true,
exitOnLeftRightKey: InputMan.ExitOnLeftRightKey.Both,
exitOnEnterKey: InputMan.ExitKey.Both,
floatingLabelText: '内線',
floatingLabelDirection: 'ThroughBorder',
width: 200
});
// 通信欄
const note = new InputMan.GcMultiLineTextBox(document.getElementById('note'), {
floatingLabelText: '通信欄',
floatingLabelDirection: 'ThroughBorder',
width: 400
});
// JSONデータを取得
const fields = [
{ name: '社員番号', control: id },
{ name: '氏名漢字', control: fullname },
{ name: 'フリガナ', control: kana },
{ name: '郵便番号', control: postal },
{ name: '住所', control: address },
{ name: '電話番号', control: tel },
{ name: '生年月日', control: birthday },
{ name: '部署名', control: department },
{ name: '内線', control: extension },
{ name: '通信欄', control: note }
];
document.getElementById('getData').addEventListener('click', () => {
var user = {};
for (var i = 0; i < fields.length; i++) {
var name = fields[i].name;
var control = fields[i].control;
user[name] = name == '部署名' ? control.displayText : control.value;
}
document.getElementById('data').value = JSON.stringify(user, null, 2);
});
<!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 colspan="2">社員番号</th>
<td><input id="id"></td>
</tr>
<tr>
<th rowspan="2">氏名</th>
<th>漢字</th>
<td><input id="fullname"></td>
</tr>
<tr>
<th>フリガナ</th>
<td><input id="kana"></td>
</tr>
<tr>
<th rowspan="2">自宅住所</th>
<th>郵便番号</th>
<td><input id="postal"></td>
</tr>
<tr>
<th>住所</th>
<td><input id="address" class="wide-input"></td>
</tr>
<tr>
<th colspan="2">電話番号</th>
<td><input id="tel"></td>
</tr>
<tr>
<th colspan="2">生年月日</th>
<td><input id="birthday"></td>
</tr>
<tr>
<th rowspan="2">所属部署</th>
<th>部署名</th>
<td><select id="department"></select></td>
</tr>
<tr>
<th>内線</th>
<td><input id="extension"></td>
</tr>
<tr>
<th colspan="2">通信欄</th>
<td><textarea id="note" class="wide-input"></textarea></td>
</tr>
</table><br>
<button id="getData">JSONデータを取得</button><br>
<textarea id="data" cols="60" rows="10"></textarea>
</body>
</html>
table.form {
border-collapse: collapse;
}
table.form > tbody > tr > * {
padding: 0.25rem 0.5rem;
border: 1px solid #c3e6cb;
}
table.form > tbody > tr > th {
text-align: left;
background: #d4edda;
color: #155724;
font-weight: normal;
}
.gcim {
border-color: #c3e6cb;;
}
[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 #c3e6cb;
}
[gcim-control-appearance="modern"] table.form > tbody > tr > th {
text-align: left;
background: #d4edda;
color: #155724;
font-weight: normal;
}
[gcim-control-appearance="modern"] .gcim {
border-color: #c3e6cb;
}
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'
},
}
});
