社員情報入力

ここではInputManJSを利用して自動入力、フォーカス移動、エラーチェックなどの機能を活用するユーザー情報入力フォームを想定した実用例を確認することができます。

氏名や住所など、基本的なユーザー情報の入力画面には、自動入力、フォーカス移動、エラーチェックなどのInputManの機能を活用できます。ここでは以下の機能を実装しています。快適な入力操作をお試しください。 入力内容に沿った文字種、書式 ふりがなの自動入力 左右キーによるフォーカス移動 入力完了時の自動フォーカス移動
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import { InputMan } from '@grapecity/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> 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: { '@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' }, } });