コントロール一覧

InputManJSには、以下のコントロールが収録されます。 入力コントロール 呼称 説明 テキストコントロール 特定の文字種以外は入力を受け付けない文字種限定入力や、入力可能な文字種へ自動変換するオートコンバート機能を搭載する文字列入力コントロールです。ひらがな、カタカナ、アルファベット、数字のほか、環境依存文字やサロゲートペア文字など、細かな文字種制御を実現します。 複数行テキストコントロール 特定の文字種以外は入力を受け付けない文字種限定入力や、入力可能な文字種へ自動変換するオートコンバート機能を搭載する複数行の文字列入力コントロールです。ひらがな、カタカナ、アルファベット、数字のほか、環境依存文字やサロゲートペア文字など、細かな文字種制御を実現します。 マスクコントロール 電話番号や郵便番号などの定型書式を正規表現を使って設定できる入力コントロールです。また、書式に設定した列挙体の項目を順次表示するスピン機能も搭載します。「〒」やハイフンなどのリテラル文字を含まない値を取得することもできるため、開発者は不要な文字を取り除く作業は不要になります。 数値コントロール 数値の入力に特化したコントロールです。3桁区切りや小数点をはじめ、通貨記号、負号もカスタマイズできます。入力範囲の制御のほか、ゼロとNull値の区別や漢数字の表示など、数値の扱いに求められるあらゆる要件に対応できます。スピンボタンやドロップダウン数値パッドなど入力を支援するインタフェースも搭載します。 日付時刻コントロール 日付や時刻の入力に特化したコントロールです。和暦や「午前」「午後」といった日本固有の表示のほか、範囲指定にも対応。またスピンボタンやドロップダウンするカレンダー表示の機能を備え、視覚的な日付入力もサポートします。日本の業務アプリケーションに多く見られる日付入力のシーンを強力に補助します。 カレンダーコントロール 和暦表示や複数月の表示をはじめ、月をまたいだ複数の日付を同時に取得するなど、豊富な機能を備えたカレンダーです。国民の祝日や企業独自の休業日の日付だけスタイルを変えて表示できるほか、日曜日を赤色で表示するといった曜日単位でのスタイル設定も可能です。月-日および年-月カレンダーの切り替えや、曜日や週番号をクリックするだけで曜日全体や指定の週すべてを選択できるなど、高度な操作性も提供します。 コンボコントロール 高機能なコンボボックスを実現できるコントロールです。一般的なリスト選択や入力機能に加えて、入力の手間を軽減しアプリケーションの使い勝手を向上させるスピン機能や自動フィルタ機能などを搭載しています。また、「コンボコントロール」のドロップダウン部では複数列やテンプレート設定を使用した高度なリスト表示が可能です。 リストコントロール Web上で高度なリスト表示を実現できるコントロールです。オーソドックスな一覧表示はもちろんのこと、複数列によるリスト表示やリストヘッダーの追加なども可能です。加えて操作性に優れ、複数項目の選択許可や、リストにチェックボックスを表示しての選択も可能です。またテンプレート機能を活用することで、リストの外観を柔軟にカスタマイズし、画像を表示したり、1つのリストアイテムを複数行で表示したりすることもできます。 ドロップダウンプラグイン InputManJSのコントロールにドロップダウン機能を付加できるプラグインです。InputManJSのGcTextBoxコントロールやGcMaskコントロールと、お使いのJavaScriptライブラリやHTML要素を柔軟に組み合わせて、高性能なドロップダウンリストコントロールを作成することが可能です。 検証コントロール InputManJSのコントロールでグラフィカルな通知UI付きの入力検証が可能になるコントロールです。同コントロールに検証のルールやタイミングを設定し、InputManJSの入力コントロール(GcTextBoxなど)に関連づけて使用します。検証のタイミングは、入力中やフォーカス移動時、もしくは開発者による任意のタイミングを設定可能です。また検証ルールでは空欄チェックや入力値の範囲チェックなどのほか、独自の検証ロジックを設定することもできます。 ソフトウェアキーボードコントロール 画面上にキーボードを表示して、マウス操作で文字を入力することができるコントロールです。ソフトウェアキーボードは、ハードウェアキーボードを使用せずに文字を入力することで、キーボード入力を監視して情報を盗まれることを防ぎやすくなります。 ファンクションキーコントロール ファンクションキー(F1など)、PageUp、PageDown、Home、Endなどのキーに対して独自の処理を割り当てることのできるコントロールです。割り当てられたキーの一覧を表示して、マウスでクリックすることもできます。 ショートカットキーコントロール InputManJSのコントロールやHTML要素にショートカットキーを割り当てられるコントロールです。ショートカットキーが押されたときに、コントロールのアクション(操作)やカスタムアクションを実行することができます。 電卓コントロール メモリ機能や四則演算などの一般的な電卓機能を提供するコントロールです。電卓はドロップダウンやポップアップで表示することができます。
import '@grapecity/inputman/CSS/gc.inputman-js.css'; import './styles.css'; import { InputMan } from '@grapecity/inputman'; import products from './data'; // テキストコントロール const gcTextBox = new InputMan.GcTextBox(document.getElementById('gcTextBox'), { text: 'テキスト' }); // 複数行テキストコントロール const gcMultiLineTextBox = new InputMan.GcMultiLineTextBox(document.getElementById('gcMultiLineTextBox'), { text: '宮城県仙台市泉区紫山3-1-4' }); // マスクコントロール const gcMask = new InputMan.GcMask(document.getElementById('gcMask'), { formatPattern: '〒\\D{3}-\\D{4}' }); // 数値コントロール const gcNumber = new InputMan.GcNumber(document.getElementById('gcNumber')); // 日付時刻コントロール const gcDateTime = new InputMan.GcDateTime(document.getElementById('gcDateTime')); // カレンダーコントロール const gcCalendar = new InputMan.GcCalendar(document.getElementById('gcCalendar')); // コンボコントロール const gcComboBox = new InputMan.GcComboBox(document.getElementById('gcComboBox'), { items: products }); // リストコントロール const gcListBox = new InputMan.GcListBox(document.getElementById('gcListBox'), { items: products }); // ドロップダウンプラグイン const gcTextBoxDropDown = new InputMan.GcTextBox(document.getElementById('gcTextBoxDropDown')); const gcDropDown = gcTextBoxDropDown.createDropDown(); gcDropDown.getElement().appendChild(document.getElementById('products')); document.getElementById('products').addEventListener('click', (e) => { if (e.srcElement.className.indexOf('product') >= 0) { gcTextBoxDropDown.setText(e.srcElement.innerText); gcDropDown.close(); } }); // 検証コントロール const gcTextBoxValidator = new InputMan.GcTextBox(document.getElementById('gcTextBoxValidator')); const validator = new GCIM.GcValidator({ items: [ { control: gcTextBoxValidator, ruleSet: [ { rule: InputMan.ValidateType.Required } ], } ], defaultNotify: { fail: { icon: { direction: InputMan.IconDirection.Inside }, controlState: true } } }); validator.validate(); // ソフトウェアキーボード const gcSoftKeyboard = new InputMan.GcSoftKeyboard(document.getElementById('gcSoftKeyboard'), { target: document.getElementById('input') }); document.getElementById('input').addEventListener('focus', () => { gcSoftKeyboard.open(); }); // ファンクションキーコントロール const gcFunctionKey = new InputMan.GcFunctionKey(document.getElementById('gcFunctionKey'), { functionKeys: [ { key: InputMan.FunctionKey.F1, description: 'F1' }, { key: InputMan.FunctionKey.F2, description: 'F2' }, { key: InputMan.FunctionKey.F3, description: 'F3' }, { key: InputMan.FunctionKey.F4, description: 'F4' }, { key: InputMan.FunctionKey.F5, description: 'F5' }, { key: InputMan.FunctionKey.F6, description: 'F6' }, { key: InputMan.FunctionKey.F7, description: 'F7' }, { key: InputMan.FunctionKey.F8, description: 'F8' }, { key: InputMan.FunctionKey.Shift | InputMan.FunctionKey.F9, description: 'Shift+F9' }, { key: InputMan.FunctionKey.Shift | InputMan.FunctionKey.F10, description: 'Shift+F10' }, { key: InputMan.FunctionKey.Shift | InputMan.FunctionKey.F11, description: 'Shift+F11' }, { key: InputMan.FunctionKey.Shift | InputMan.FunctionKey.F12, description: 'Shift+F12' }, { key: InputMan.FunctionKey.Ctrl | InputMan.FunctionKey.Home, description: 'Ctrl+Home' }, { key: InputMan.FunctionKey.Ctrl | InputMan.FunctionKey.End, description: 'Ctrl+End' }, { key: InputMan.FunctionKey.Alt | InputMan.FunctionKey.PageUp, description: 'Alt+PageUp' }, { key: InputMan.FunctionKey.Alt | InputMan.FunctionKey.PageDown, description: 'Alt+PageDown' }, ], onActived: function (s, e) { window.alert('「' + e.description + '」キーが押されました。'); } }); const controls = [gcTextBox, gcMultiLineTextBox, gcMask, gcNumber, gcDateTime, gcCalendar, gcComboBox, gcListBox, gcTextBoxDropDown, gcTextBoxValidator, document.getElementById('input')]; // ショートカットキーコントロール var gcShortcut = new InputMan.GcShortcut(); for (let control of controls) { gcShortcut.add({ key: InputMan.GcShortcutKey.P, target: control, action: InputMan.GcShortcutAction.PreviousControl }); gcShortcut.add({ key: InputMan.GcShortcutKey.N, target: control, action: InputMan.GcShortcutAction.NextControl }); } // 電卓コントロール let gcCalculator = new InputMan.GcCalculator(document.getElementById('calculator'));
<!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> <div class="flexbox"> <div> テキストコントロール<br> <input id="gcTextBox"> </div> <div> 複数行テキストコントロール<br> <textarea id="gcMultiLineTextBox"></textarea> </div> <div> マスクコントロール<br> <input id="gcMask"> </div> <div> 数値コントロール<br> <input id="gcNumber"> </div> <div> 日付時刻コントロール<br> <input id="gcDateTime"> </div> <div> カレンダーコントロール<br> <div id="gcCalendar"></div> </div> <div> コンボコントロール<br> <select id="gcComboBox"></select> </div> <div> リストコントロール<br> <select id="gcListBox"></select> </div> <div> ドロップダウンプラグイン<br> <input id="gcTextBoxDropDown"> </div> <div> 検証コントロール<br> <input id="gcTextBoxValidator"> </div> <div> ソフトウェアキーボード<br> <input id="input"> <div id="gcSoftKeyboard"></div> </div> </div> <div> ファンクションキーコントロール<br> <div id="gcFunctionKey"></div> </div> <br> <div> 電卓コントロール<br> <div id="calculator"></div> </div> <div id="products"> <table class="form"> <tr> <th>商品コード</th> <th>商品名</th> <th>価格</th> </tr> <tr> <th colspan="3">飲料</th> </tr> <tr> <td>11</td> <td class="product">果汁100%オレンジ</td> <td>200円</td> </tr> <tr> <td>12</td> <td class="product">コーヒーマイルド</td> <td>190円</td> </tr> <tr> <td>13</td> <td class="product">ピリピリビール</td> <td>280円</td> </tr> <tr> <th colspan="3">調味料</th> </tr> <tr> <td>21</td> <td class="product">ホワイトソルト</td> <td>260円</td> </tr> <tr> <td>22</td> <td class="product">ブラックペッパー</td> <td>210円</td> </tr> <tr> <td>23</td> <td class="product">ピュアシュガー</td> <td>280円</td> </tr> </table> </div> </body> </html>
body { padding-bottom: 10rem; } .flexbox > div { width: 200px; } table.sample > tbody > tr > td:nth-child(3) { max-width: 500px; } table.form { border-collapse: collapse; } table.form > tbody > tr > * { padding: 0.25rem 0.5rem; background: white; border: 1px solid #D2D2D2; } table.form > tbody > tr > th { text-align: left; background: #F0F0F0; font-weight: normal; } .product { color: blue; cursor : pointer; }
module.exports = [ '果汁100%オレンジ', 'コーヒーマイルド', 'ピリピリビール', 'ホワイトソルト', 'ブラックペッパー', 'ピュアシュガー' ];
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' }, } });