Wijmo 5

Input入門

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

はじめに

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

  1. Wijmoへの参照を追加します。
  2. Wijmoコントロールのホストとして機能するマークアップを追加します。
  3. JavaScriptを使用してWijmoコントロールを初期化します。
  4. (オプション)入力コントロールの外観をカスタマイズするCSSを追加します。
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> <link rel="stylesheet" type="text/css" href="css/wijmo.css" /> <link href="css/app.css" rel="stylesheet" type="text/css" /> <script src="scripts/wijmo.js" type="text/javascript"></script> <script src="scripts/wijmo.input.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> </head> <body> <input id="gsInputNumber" type="text" /> </body> </html>
var inputNumber = new wijmo.input.InputNumber('#gsInputNumber'); inputNumber.value = 3.5; inputNumber.step = 0.5; inputNumber.format = 'n';

結果(ライブ):

AutoComplete

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

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

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

<div> <label>itemsSourceのみ</label> <div id="acAutoComplete1"></div> </div> <div> <label>itemsSource &amp; cssMatch</label> <div id="acAutoComplete2"></div> </div>
var autoComplete1 = new wijmo.input.AutoComplete('#acAutoComplete1'); var autoComplete2 = new wijmo.input.AutoComplete('#acAutoComplete2'); autoComplete1.itemsSource = data.countries; autoComplete2.itemsSource = data.countries; autoComplete2.cssMatch = 'highlight'; // CSS class for custom highlighting
.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に設定されています。

<div> <label>編集不可</label> <div id="cbComboBox1"></div> </div> <div> <label>Editable</label> <div id="cbComboBox2"></div> </div>
var comboBox1 = new wijmo.input.ComboBox('#cbComboBox1'); var comboBox2 = new wijmo.input.ComboBox('#cbComboBox2'); comboBox1.itemsSource = data.countries; comboBox1.isEditable = false; comboBox2.itemsSource = data.countries; comboBox2.isEditable = true;

結果(ライブ):

InputDateとCalendar

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

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

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

<div> <label>Bound InputDate with min &amp; max</label> <input id="idcInputDate" type="text" /> </div> <div> <label>Bound Calendar with min &amp; max</label> <input id="idcCalendar" type="text" style="width:300px;" /> </div> <p> <b>有効な範囲: <span id="idcMinDate"></span> to <span id="idcMaxDate"></span></b> </p>
var inputDate = new wijmo.input.InputDate('#idcInputDate'); var calendar = new wijmo.input.Calendar('#idcCalendar'); var today = new Date(); var minDate = new Date(today.getFullYear(), 0, 1); var maxDate = new Date(today.getFullYear(), 11, 31); var format = 'MMM d, yyyy'; inputDate.value = today; inputDate.min = minDate; inputDate.max = maxDate; calendar.value = today; calendar.min = minDate; calendar.max = maxDate; // set current date range values below the example document.getElementById('idcMinDate').innerHTML = wijmo.Globalize.format(minDate, format); document.getElementById('idcMaxDate').innerHTML = wijmo.Globalize.format(maxDate, format);

結果(ライブ):

有効な範囲: to

InputDateとInputTime

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

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

<div> <label>Bound InputDate with min, max, &amp; format</label> <input id="iditInputDate" type="text" /> </div> <div> <label>Bound InputTime with min, max, &amp; step</label> <input id="iditInputTime" type="text" /> </div>
var inputDate = new wijmo.input.InputDate('#iditInputDate'); var inputTime = new wijmo.input.InputTime('#iditInputTime'); var today = new Date(); var minDate = new Date(today.getFullYear(), 0, 1); var maxDate = new Date(today.getFullYear(), 11, 31); var minTime = new Date(0, 0, 0, 7, 0, 0, 0); var maxTime = new Date(0, 0, 0, 19, 0, 0, 0); inputTime.valueChanged.addHandler(valueChanged); inputDate.valueChanged.addHandler(valueChanged); inputDate.value = today; inputDate.min = minDate; inputDate.max = maxDate; inputDate.format = 'yyyy/MM/dd'; inputTime.value = today; inputTime.min = minTime; inputTime.max = maxTime; inputTime.step = 15; // valueChanged event handler function valueChanged() { // get new date from the two controls using Wijmo utility functions var val = wijmo.DateTime.fromDateTime(inputDate.value, inputTime.value); // format and display the new date document.getElementById('iditSelectedValue').innerHTML = wijmo.Globalize.format(val, 'yyyy/MM/dd h:mm:ss tt'); }

結果(ライブ):

選択された日付と時刻:

ListBox

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

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

<div> <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>
var listBox = new wijmo.input.ListBox('#lbListBox'); listBox.selectedIndexChanged.addHandler(selectedIndexChanged); listBox.itemsSource = data.cities; // selectedIndexChanged event handler function selectedIndexChanged(sender) { // set selectedIndex and selectedValue text document.getElementById('lbSelIdx').innerHTML = sender.selectedIndex; document.getElementById('lbSelVal').innerHTML = sender.selectedValue; }

結果(ライブ):

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

選択された値:

InputNumber

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

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

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

<div> <label>非連結("n0"書式を設定)</label> <input id="inInputNumber1" type="text" /> </div> <div> <label>連結("n"書式を設定)</label> <input id="inInputNumber2" type="text" /> </div> <div> <label>連結(min = 0、max = 10、step、"c2"書式を設定)</label> <input id="inInputNumber3" type="text" /> </div> <div> <label>非連結(プレースホルダ、isRequired="false"を設定)</label> <input id="inInputNumber4" type="text" /> </div>
var inputNumber1 = new wijmo.input.InputNumber('#inInputNumber1'); var inputNumber2 = new wijmo.input.InputNumber('#inInputNumber2'); var inputNumber3 = new wijmo.input.InputNumber('#inInputNumber3'); var inputNumber4 = new wijmo.input.InputNumber('#inInputNumber4'); inputNumber1.value = 0; inputNumber1.format = 'n0'; inputNumber2.value = Math.PI; inputNumber2.format = 'n'; inputNumber3.value = 3.5; inputNumber3.format = 'c2'; inputNumber3.step = 0.5; inputNumber3.min = 0; inputNumber3.max = 10; inputNumber4.placeholder = 'Enter a number...'; inputNumber4.isRequired = false; inputNumber4.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プロパティを使用する方法を示します。

<div> <label>社会保障番号</label> <input id="imSocial" type="text" title="Mask: 000-00-0000" /> </div> <div> <label>電話番号</label> <input id="imPhone" type="text" title="Mask: (999) 000-0000" /> </div> <div> <label>独自のマスクを作成</label> <input id="imCustomInput" type="text" /> <input id="imCustomTrial" type="text" /> </div> <div> <label>InputDate with Mask</label> <input id="imInputDate" type="text" title="Mask: 9999/99/99" /> </div> <div> <label>InputTime with Mask</label> <input id="imInputTime" type="text" title="Mask: 00:00 >LL" /> </div>
var socialSecurity = new wijmo.input.InputMask('#imSocial'), phoneNumber = new wijmo.input.InputMask('#imPhone'), customMaskInput = new wijmo.input.InputMask('#imCustomInput'), customMaskTrial = new wijmo.input.InputMask('#imCustomTrial'), inputDate = new wijmo.input.InputDate('#imInputDate'), inputTime = new wijmo.input.InputTime('#imInputTime'), today = new Date(); socialSecurity.mask = '000-00-0000'; phoneNumber.mask = '(999) 000-0000'; // valueChanged event handler customMaskInput.valueChanged.addHandler(function(sender) { customMaskTrial.mask = sender.value; customMaskTrial.hostElement.title = 'Mask: ' + (sender.value || 'N/A'); }); customMaskInput.required = false; customMaskInput.placeholder = 'マスク文字を入力'; customMaskInput.value = null; customMaskTrial.required = false; customMaskTrial.placeholder = 'マスク入力を試す'; inputDate.value = today; inputDate.format = 'd'; inputDate.mask = '9999/99/99'; inputTime.value = today; inputTime.format = 't'; inputTime.step = 15; inputTime.isEditable = true; inputTime.mask = '00:00 >LL';

結果(ライブ):

Menu

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

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

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

<div> <label>itemClickedイベント</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 アプリケーションを終了します</option> </select> <select id="mEditMenu"> <option>Cut: 現在の選択をクリップボードに移動します</option> <option>Copy: 現在の選択をクリップボードにコピーします</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> <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>
var fileMenu = new wijmo.input.Menu('#mFileMenu'); var editMenu = new wijmo.input.Menu('#mEditMenu'); var cmdMenu = new wijmo.input.Menu('#mCmdMenu'); var inputNumber = new wijmo.input.InputNumber('#mInputNumber'); fileMenu.header = 'File'; fileMenu.itemClicked.addHandler(itemClicked); editMenu.header = 'Edit'; editMenu.itemClicked.addHandler(itemClicked); cmdMenu.header = '税率の変更'; // set command object for the command menu cmdMenu.command = { executeCommand: function (arg) { // convert argument to Number arg = wijmo.changeType(arg, wijmo.DataType.Number); // check if the conversion was successful if (wijmo.isNumber(arg)) { // update the value inputNumber.value += arg; } }, canExecuteCommand: function (arg) { // convert argument to Number arg = wijmo.changeType(arg, wijmo.DataType.Number); // check if the conversion was successful if (wijmo.isNumber(arg)) { var val = inputNumber.value + arg; // check if the value is valid return val >= 0 && val <= 1; } return false; } }; inputNumber.value = 0.07; inputNumber.step = 0.05; inputNumber.format = 'p0'; inputNumber.min = 0; inputNumber.max = 1; // itemClicked event handler for File and Edit menus function itemClicked(sender) { alert('You\'ve selected option ' + sender.selectedIndex + ' from the ' + sender.header + ' menu!'); }

結果(ライブ):