ui:inputNumber | Lightning コンポーネント開発者ガイド

ui:inputNumber コンポーネントは、text 型の HTML input 要素として表示される、数値の入力項目を表します。これは、JavaScript の数値型を使用して、サポートされる桁数を��定します。Lightning Design System のスタイル設定を適用するには、ui:inputNumber の代わりに lightning:input を使用し、type="number" を指定することをお勧めします。

ui:inputNumber コンポーネントからの出力を表示するには、ui:outputEmail コンポーネントを使用します。同様に、ui:outputNumber の代わりに lightning:formattedNumber を使用することをお勧めします。

次の例に、10 の値を表示する数値項目を示します。

1<aura:attribute name="num" type="integer" default="10"/>
2<ui:inputNumber aura:id="num" label="Age" value="{!v.num}"/>

前の例の結果、次の HTML になります。

1<div class="uiInput uiInputNumber uiInput--default uiInput--input">
2<label class="uiLabel-left form-element__label uiLabel">
3    <span>Age</span>
4</label>
5<input max="99999999999999" step="1" type="text" 
6        min="-99999999999999" class="input">
7</div>

ui:inputNumber コンポーネントからの出力を表示するには、ui:outputNumber コンポーネントを使用します。カンマを含む数値を指定する場合は、type="integer" を使用します。次の例は 100,000 を返します。

1<aura:attribute name="number" type="integer" default="100,000"/>
2<ui:inputNumber label="Number" value="{!v.number}"/>

type="string" の場合は、正しい形式で出力するためカンマを含まない数値を指定します。次の例も 100,000 を返します。

1<aura:attribute name="number" type="string" default="100000"/>
2<ui:inputNumber label="Number" value="{!v.number}"/>

format="#,##0,000.00#" を指定すると、10,000.00 のように書式設定された数値が返されます。

1<ui:inputNumber label="Cost" aura:id="costField" format="#,##0,000.00#" value="10000"/>

次の例は、ui:inputNumber コンポーネントの値を ui:outputNumber にバインドします。Lightning Design System のスタイル設定を適用するには、ui:inputNumber の代わりに lightning:input を使用し、type="number" を指定することをお勧めします。同様に、ui:outputNumber の代わりに lightning:formattedNumber を使用することをお勧めします。

1<aura:component> 
2    <aura:attribute name="myNumber" type="integer" default="10"/>
3    <ui:inputNumber label="Enter a number: " value="{!v.myNumber}" updateOn="keyup"/> <br/>
4    <ui:outputNumber value="{!v.myNumber}"/>
5</aura:component>

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`errors`	List	表示するエラーのリスト。
`format`	String	数値の形式。たとえば、format=“.00” は、小数点以下 2 桁の数値を表示します。指定されていない場合は、ロケールのデフォルト形式が使用されます。
`label`	String	表示ラベルコンポーネントのテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`maxlength`	Integer	入力項目に入力できる最大文字数。表示される HTML 入力要素の maxlength 属性に対応します。
`placeholder`	String	項目が空の場合に、ユーザに有効な入力を促すためのテキスト。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`size`	Integer	入力項目の長さを示す文字数。表示される HTML 入力要素の size 属性に対応します。
`updateOn`	String	処理されたイベントに updateOn 属性が設定されている場合、コンポーネントの値のバインドを更新します。デフォルト値は「change」です。
`value`	Decimal	数値の入力値。

イベント

イベント名	イベントタイプ	説明
`dblclick`	COMPONENT	ユーザがコンポーネントをダブルクリックすると起動されるイベント。
`mouseover`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`mouseout`	COMPONENT	ユーザがコンポーネントからマウスポインタを移動すると起動されるイベント。
`mouseup`	COMPONENT	ユーザがコンポーネント上でマウスボタンを放すと起動されるイベント。
`mousemove`	COMPONENT	ユーザがコンポーネントにマウスポインタを重ねると起動されるイベント。
`click`	COMPONENT	ユーザがコンポーネントをクリックすると起動されるイベント。
`mousedown`	COMPONENT	ユーザがコンポーネント上でマウスボタンをクリックすると起動されるイベント。
`select`	COMPONENT	ユーザが何らかのテキストを選択すると起動されるイベント。
`blur`	COMPONENT	ユーザがコンポーネントから離れると起動されるイベント。
`focus`	COMPONENT	ユーザがコンポーネントにフォーカスを移動すると起動されるイベント。
`keypress`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを押すまたは押したままにすると起動されるイベント。
`keyup`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを放すと起動されるイベント。
`keydown`	COMPONENT	ユーザがコンポーネント上でキーボードのキーを押すと起動されるイベント。
`cut`	COMPONENT	ユーザがコンテンツをクリップボードに切り取ると起動されるイベント。
`onError`	COMPONENT	コンポーネントに検証エラーがあると起動されるイベント。
`onClearErrors`	COMPONENT	いずれかの検証エラーをクリアする必要がある場合に起動されるイベント。
`change`	COMPONENT	ユーザが入力のコンテンツを変更したときに起動されるイベント。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーすると起動されるイベント。
`paste`	COMPONENT	ユーザがクリップボードからコンテンツを貼り付けると起動されるイベント。