Wijmo

Input入門

このページでは、WijmoのInputコントロールを使い始める方法を示します。

はじめに

InputコントロールをJavaScriptアプリケーションで使用する手順は以下のとおりです。

  1. Wijmoへの参照を追加します。
  2. Wijmoコントロールのホストとして機能するマークアップを追加します。
  3. JavaScriptを使用してWijmoコントロールを初期化します。
  4. (オプション)入力コントロールの外観をカスタマイズするCSSを追加します。
HTML
<input id="gsInputNumber">
JS
var inputNumber = new wijmo.input.InputNumber('#gsInputNumber', { value: 3.5, step: 0.5, format: 'n2' });

結果(ライブ):

AutoComplete

AutoCompleteコントロールは、入力テキストに従った項目リストの絞り込みとドロップダウンリストからの値の直接選択が可能なオートコンプリートコントロールです。

AutoCompleteコントロールを使用するには、少なくともitemsSourceプロパティにデータの配列を設定して項目リストに内容を格納する必要があります。AutoCompleteコントロールにはその他にも、コントロールの動作を変更するためにいくつかのプロパティがあります(cssMatchプロパティなど)。cssMatchプロパティでは、検索語に一致する部分のハイライトに使用するCSSクラスを指定できます。

以下の例では、itemsSourceプロパティで文字列の配列を使用してAutoCompleteコントロールの項目リストにデータを読み込んでいます。候補のリストを表示するには、下のAutoCompleteコントロールに「ab」または「za」と入力してください。

HTML
<div class="app-input-group"> <label for="acAutoComplete1">itemsSource Only</label> <div id="acAutoComplete1"></div> </div> <div class="app-input-group"> <label for="acAutoComplete2">itemsSource & cssMatch</label> <div id="acAutoComplete2"></div> </div>
JS
var autoComplete1 = new wijmo.input.AutoComplete('#acAutoComplete1', { itemsSource: data.countries }); var autoComplete2 = new wijmo.input.AutoComplete('#acAutoComplete2', { itemsSource: data.countries, cssMatch: 'highlight' // CSS class for custom highlighting });
CSS
.highlight { /* custom AutoComplete highlight */ background-color: #ff0; color: #000; }

結果(ライブ):

ComboBox

ComboBoxコントロールはAutoCompleteコントロールによく似ていますが、入力テキストに従って候補リストを提示するのではなく、入力テキストを自動的に補完してその項目を選択します。

AutoCompleteコントロールと同様に、少なくともComboBoxのitemsSourceプロパティにデータの配列を設定して項目リストに内容を格納する必要があります。また、isEditableプロパティによってComboBoxを編集可能にするかどうかを指定することもできます。isEditableプロパティは、ユーザーがComboBoxの項目リストに存在しない値を入力できるかどうかを決定します。

以下の2つのComboBoxは、上のAutoCompleteコントロールと同じデータソースにバインドされています。最初のComboBoxのisEditableプロパティはfalseに設定されており、2つ目のComboBoxのisEditableプロパティはtrueに設定されています。

HTML
<div class="app-input-group"> <label>Non-Editable</label> <div id="cbComboBox1"></div> </div> <div class="app-input-group"> <label>Editable</label> <div id="cbComboBox2"></div> </div>
JS
var comboBox1 = new wijmo.input.ComboBox('#cbComboBox1', { isEditable: false, itemsSource: data.countries }); var comboBox2 = new wijmo.input.ComboBox('#cbComboBox2', { isEditable: true, itemsSource: data.countries });

結果(ライブ):

InputDateとCalendar

InputDateコントロールはドロップダウンカレンダーによって日付を編集および選択できるコントロールで、ユーザーが間違った値を入力することを防ぎます。InputDateのドロップダウンカレンダーは別個のコントロールとして開発されており、InputDateコントロールとは無関係に単独で使用することもできます。

InputDateとCalendarはどちらも、コントロールの動作を変更するためにいくつかのプロパティを指定します。最もよく使用されるプロパティを以下に示します。

以下の例は、これらのプロパティの使用方法を示します。

HTML
<div class="app-input-group"> <label>Bound InputDate with min & max</label> <input id="idcInputDate" type="text" /> </div> <div class="app-input-group"> <label>Bound Calendar with min & max</label> <input id="idcCalendar" type="text" style="width:300px;" /> </div> <p> <b> Valid Range: <span id="idcMinDate"></span> to <span id="idcMaxDate"></span> </b> </p>
JS
var today = new Date(), minDate = new Date(today.getFullYear(), 0, 1), maxDate = new Date(today.getFullYear(), 11, 31); var inputDate = new wijmo.input.InputDate('#idcInputDate', { value: today, min: minDate, max: maxDate }); var calendar = new wijmo.input.Calendar('#idcCalendar', { value: today, min: minDate, max: maxDate }); // show date range values below the example var format = 'MMM d, yyyy'; document.getElementById('idcMinDate').textContent = wijmo.Globalize.format(minDate, format); document.getElementById('idcMaxDate').textContent = wijmo.Globalize.format(maxDate, format);

結果(ライブ):

有効な範囲:

InputDateとInputTime

InputTimeコントロールはInputDateコントロールに似ており、JavaScript日付の時刻部分を変更できます。InputTimeコントロールは、InputDateコントロールと多くの同じプロパティを共有しています(formatminmaxvalueなど)。InputTimeコントロールにはその他にstepプロパティがあり、ドロップダウンリストの項目の時間間隔(分単位)を指定できます。

以下の例は、InputTimeコントロールをInputDateコントロールと組み合わせて使用する方法を示します。 これらのコントロールは連携して同じJavaScriptのDateオブジェクトを編集し、それぞれが担当するDateTimeの部分のみを更新します。

HTML
<div class="app-input-group"> <label>Bound InputDate with min, max, & format</label> <input id="iditInputDate" type="text" /> </div> <div class="app-input-group"> <label>Bound InputTime with min, max, & step</label> <input id="iditInputTime" type="text" /> </div> <p> <b>Selected Date & Time: <span id="iditSelectedValue"></span></b> </p>
JS
var inputDate = new wijmo.input.InputDate('#iditInputDate', { valueChanged: valueChanged, min: new Date(today.getFullYear(), 0, 1), max: new Date(today.getFullYear(), 11, 31), format: 'MMM dd, yyyy' }); var inputTime = new wijmo.input.InputTime('#iditInputTime', { valueChanged: valueChanged, min: new Date(0, 0, 0, 7, 0, 0, 0), max: new Date(0, 0, 0, 19, 0, 0, 0), step: 15 }); valueChanged(); // valueChanged event handler function valueChanged() { if (inputDate && inputTime) { // merge date and time values var val = wijmo.DateTime.fromDateTime(inputDate.value, inputTime.value); // format and display the new date var dateTime = wijmo.Globalize.format(val, 'MMM dd, yyyy h:mm:ss tt'); document.getElementById('iditSelectedValue').textContent = dateTime; } }

結果(ライブ):

選択された日付と時刻:

ListBox

ListBoxコントロールには項目のリストが表示されます。ユーザーはマウスとキーボードを使用してこのリストから項目を選択できます。AutoCompleteおよびComboBoxコントロールと同様に、このコントロールを使用するためにはListBoxのitemsSourceプロパティを指定する必要があります。

以下の例では、ListBoxコントロール内の項目を選択できます。コントロールのselectedIndexプロパティとselectedValueプロパティがその下に表示されます。

HTML
<div class="app-input-group"> <div id="lbListBox" style="height:150px;width:250px;"></div> </div> <p> <b>selectedIndex: <span id="lbSelIdx"></span></b> </p> <p> <b>selectedValue: <span id="lbSelVal"></span></b> </p>
JS
var listBox = new wijmo.input.ListBox('#lbListBox', { selectedIndexChanged: function (s, e) { document.getElementById('lbSelIdx').textContent = s.selectedIndex; document.getElementById('lbSelVal').textContent = s.selectedValue; }, itemsSource: data.cities });

結果(ライブ):

選択されたインデックス:

選択された値:

InputNumber

InputNumberコントロールでは、数値を編集できます。ユーザーが無効なデータを入力することを防ぎ、オプションで編集時に数値を書式設定します。InputNumberはプロパティを指定せずに使用できますが、通常はvalueプロパティを使用して何らかのデータにバインドします。

valueプロパティに加えて、InputNumberコントロールにはコントロールの動作を変更するために以下のようなプロパティがあります。

以下の例は、これらのプロパティの使用方法を示します。

HTML
<div class="app-input-group"> <label>Unbound with "n0" format</label> <input id="inInputNumber1" type="text" /> </div> <div class="app-input-group"> <label>Bound with "n" format</label> <input id="inInputNumber2" type="text" /> </div> <div class="app-input-group"> <label>Bound with min (0), max (10), step, and "c2" format</label> <input id="inInputNumber3" type="text" /> </div> <div class="app-input-group"> <label>Unbound with placeholder and isRequired="false"</label> <input id="inInputNumber4" type="text" /> </div>
JS
var inputNumber1 = new wijmo.input.InputNumber('#inInputNumber1', { value: 0, format: 'n0' }); var inputNumber2 = new wijmo.input.InputNumber('#inInputNumber2', { value: Math.PI, format: 'n' }); var inputNumber3 = new wijmo.input.InputNumber('#inInputNumber3', { value: 3.5, format: 'c2', step: 0.5, min: 0, max: 10 }); var inputNumber4 = new wijmo.input.InputNumber('#inInputNumber4', { placeholder: 'Enter a number...', isRequired: false, value: null });

結果(ライブ):

InputMask

InputMaskコントロールは検証と書式設定を可能にします。valuemaskのプロパティを設定することで特定の入力制御を実現します。以下の文字を組み合わせてmaskのプロパティを使用することができます。

0
数字。
9
数字またはスペース。
#
数字、符号、またはスペース。
L
英字。
l
英字またはスペース。
A
英数字。
a
英数字またはスペース。
.
ローカライズされた小数点。
,
ローカライズされた桁区切り。
:
ローカライズされた時刻区切り。
/
ローカライズされた日付の区切り文字。
$
ローカライズされた通貨記号。
<
後続の文字を小文字に変換します。
>
後続の文字を大文字に変換します。
|
大文字小文字の変換を無効にします。
\
任意の文字をエスケープしてリテラルに変えます。
DBCS数字。
DBCSひらがな。
DBCS大文字ひらがな。
DBCSカタカナ。
DBCS大文字カタカナ。
K
SBCSカタカナ。
N
SBCS大文字カタカナ。
任意のDBCS文字。
H
任意のSBCS文字。
その他すべて
リテラル。

以下の例は、InputMask、InputDate、およびInputTimeコントロールでvalueプロパティとmaskプロパティを使用する方法を示します。

HTML
<div class="app-input-group"> <label>Social Security Number</label> <input id="imSocial" title="Mask: 000-00-0000" /> </div> <div class="app-input-group"> <label>Phone Number</label> <input id="imPhone" title="Mask: (999) 000-0000" /> </div> <div class="app-input-group"> <label>Try your own</label> <input id="imCustomInput" /> <input id="imCustomTrial" /> </div> <div class="app-input-group"> <label>InputDate with Mask</label> <input id="imInputDate" title="Mask: 99/99/9999" /> </div> <div class="app-input-group"> <label>InputTime with Mask</label> <input id="imInputTime" title="Mask: 00:00 >LL" /> </div>
JS
// simple masks var socialSecurity = new wijmo.input.InputMask('#imSocial', { mask: '000-00-0000' }); var phoneNumber = new wijmo.input.InputMask('#imPhone', { mask: '(999) 000-0000' }); // try custom masks var customMaskTrial = new wijmo.input.InputMask('#imCustomTrial', { isRequired: false, placeholder: 'Try your input mask...' }); var customMaskInput = new wijmo.input.InputMask('#imCustomInput', { valueChanged: function (s, e) { customMaskTrial.mask = s.value; customMaskTrial.hostElement.title = 'Mask: ' + (s.value || 'N/A'); }, isRequired: false, placeholder: 'Enter an input mask...', value = null }); // use masks with input date and time controls var inputDate = new wijmo.input.InputDate('#imInputDate', { format: 'MM/dd/yyyy', mask: '99/99/9999' }); var inputTime = new wijmo.input.InputTime('#imInputTime', { format: 'hh:mm tt', step: 15, isEditable: true, mask: '00:00 >LL' });

結果(ライブ):

Menu

Menuコントロールを使用すると、クリック可能な項目を含むシンプルなドロップダウンリストを作成できます。Menuの項目は直接定義するか、ComboBoxと同様にitemsSourceプロパティを使用して定義できます。Menuに表示するテキストを指定するには、headerプロパティを設定します。

Menuコントロールでユーザー選択を処理する方法は2通りあります。各メニュー項目にコマンドを指定する方法と、itemClickedイベントを処理する方法です。itemClickedイベントとは異なり、コマンドは以下の2つのメソッドを実装するオブジェクトです。

以下の例は、この両方の使用方法を示します。

HTML
<div class="app-input-group"> <label>itemClicked Event</label> <select id="mFileMenu"> <option>New: create a new document</option> <option>Open: load an existing document from a file</option> <option>Save: save the current document to a file</option> <option></option> <option>Exit: save changes and exit the application</option> </select> <select id="mEditMenu"> <option>Cut: move the current selection to the clipboard</option> <option>Copy: copy the current selection to the clipboard</option> <option>Paste: insert the clipboard content at the cursor position</option> <option></option> <option>Find: search the current document for some text</option> <option>Replace: replace occurrences of a string in the current document</option> </select> </div> <div class="app-input-group"> <label>Commands</label> <select id="mCmdMenu"> <option cmd-param=".25">+ 25%</option> <option cmd-param=".10">+ 10%</option> <option cmd-param=".05">+ 5%</option> <option cmd-param=".01">+ 1%</option> <option></option> <option cmd-param="-.01">- 1%</option> <option cmd-param="-.05">- 5%</option> <option cmd-param="-.10">- 10%</option> <option cmd-param="-.25">- 25%</option> </select> <input id="mInputNumber" type="text" /> </div>
JS
// simple menus with a common itemClicked handler var fileMenu = new wijmo.input.Menu('#mFileMenu', { header: 'File', itemClicked: itemClicked }); var editMenu = new wijmo.input.Menu('#mEditMenu', { header: 'Edit', itemClicked: itemClicked }); function itemClicked(s, e) { alert(wijmo.format('You selected option {selectedIndex} from the {header} menu!', s)); } // start with a 7% tax value var inputNumber = new wijmo.input.InputNumber('#mInputNumber', { value: 0.07, step: 0.05, format: 'p0', min: 0, max: 1 }); // use a command-based menu to update the tax var cmdMenu = new wijmo.input.Menu('#mCmdMenu', { header: 'Chance Tax', command: { executeCommand: function (arg) { arg = wijmo.changeType(arg, wijmo.DataType.Number); if (wijmo.isNumber(arg)) { inputNumber.value += arg; } }, canExecuteCommand: function (arg) { arg = wijmo.changeType(arg, wijmo.DataType.Number); if (wijmo.isNumber(arg)) { var val = inputNumber.value + arg; return val >= 0 && val <= 1; } return false; } } });

結果(ライブ):