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

ui:inputPhone コンポーネントは、tel 型の HTML input タグとして表示される、電話番号を入力するための入力項目を表します。ui:inputPhone コンポーネントからの出力を表示するには、ui:outputPhone コンポーネントを使用します。

次の例は、指定された電話番号を表示する電話項目を示します。

1<ui:inputPhone label="Phone" value="415-123-4567" />

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

1<ui:inputPhone label="Phone" value="415-123-4567" />

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

1<div class="uiInput uiInputPhone uiInput--default uiInput--input">
2    <label class="uiLabel-left form-element__label uiLabel">
3        <span>Phone</span>
4    </label>
5    <input class="input" type="tel">
6</div>

次の例は、ui:inputPhone コンポーネントの値を取得し、ui:outputPhone を使用して値を表示します。

1<aura:component>
2    <ui:inputPhone aura:id="phone" label="Phone Number" class="field" value="415-123-4567" />
3    <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4
5 <div aura:id="msg" class="hide">
6  You entered: <ui:outputPhone aura:id="oPhone" value="" />
7 </div>
8</aura:component>

1({
2   
3    setOutput : function(component, event, helper) {
4    	var cmpMsg = component.find("msg");
5    	$A.util.removeClass(cmpMsg, 'hide');
6       
7        var phone = component.find("phone").get("v.value");
8        var oPhone = component.find("oPhone");
9        oPhone.set("v.value", phone);
10    }
11})

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`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`	String	現在、値は入力項目にあります。

イベント

イベント名	イベントタイプ	説明
`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	ユーザがコンテンツを切り取ってクリップボードに保存したことを示します。
`validationError`	COMPONENT	コンポーネントに検証エラーがあることを示します。
`clearErrors`	COMPONENT	検証エラーをすべてクリアする必要があることを示します。
`change`	COMPONENT	コンポーネントのコンテンツまたは状況が変更されたことを示します。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーしたことを示します。
`paste`	COMPONENT	ユーザがコンテンツをクリップボードから貼り付けたことを示します。