この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

ui:inputTextArea

編集可能または参照のみに設定できる HTML textarea 要素。Android デバイスの Chrome ブラウザではスクロールバーが表示されない場合がありますが、テキストエリアにフォーカスを置くとスクロールを有効にできます。

ui:inputTextArea コンポーネントは、HTML textarea タグとして表示される、複数行テキスト入力項目を表します。ui:inputTextArea コンポーネントからの出力を表示するには、ui:outputTextArea コンポーネントを使用します。

次の例は、ui:inputTextArea コンポーネントの基本設定です。

1<ui:inputTextArea aura:id="comments" label="Comments" value="My comments" rows="5"/>

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

1<div class="uiInput uiInputTextArea uiInput--default uiInput--textarea">
2    <label class="uiLabel-left form-element__label uiLabel">
3        <span>Comments</span>
4    </label>
5    <textarea class="textarea" cols="20" rows="5">
6    </textarea>
7</div>

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

1<aura:component>
2     <ui:inputTextArea aura:id="comments" label="Comments"  value="My comments" rows="5"/>
3     <ui:button class="btn" label="Submit" press="{!c.setOutput}"/> 
4     
5     <div aura:id="msg" class="hide">
6  You entered: <ui:outputTextArea aura:id="oTextarea" value=""/>
7 </div>
8</aura:component>

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

属性

属性名	属性型	説明
`body`	Component[]	コンポーネントのボディ。マークアップでは、これはタグのボディに含まれるすべてを指します。
`class`	String	コンポーネントに添付される CSS スタイル。このスタイルは、コンポーネントで出力される基本スタイルに追加されます。
`cols`	Integer	テキストエリアの幅。1 行に一度に表示する文字数で定義します。デフォルト値は「20」です。
`disabled`	Boolean	コンポーネントを無効な状態で表示するかどうかを指定します。デフォルト値は「false」です。
`errors`	List	表示するエラーのリスト。
`label`	String	表示ラベルコンポーネントのテキスト。
`labelClass`	String	表示ラベルコンポーネントの CSS クラス。
`maxlength`	Integer	入力項目に入力できる最大文字数。表示される HTML textarea 要素の maxlength 属性に対応します。
`placeholder`	String	デフォルトで表示されるテキスト。
`readonly`	Boolean	このテキストエリアを参照のみとして表示するかどうかを指定します。デフォルト値は「false」です。
`required`	Boolean	入力が必須かどうかを指定します。デフォルト値は「false」です。
`requiredIndicatorClass`	String	必須のインジケータコンポーネントの CSS クラス。
`resizable`	Boolean	テキストエリアのサイズを変更できるかどうかを指定します。デフォルトは true です。
`rows`	Integer	テキストエリアの高さ。一度に表示する行数で定義されます。デフォルト値は「2」です。
`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	ユーザがコンテンツをクリップボードに切り取ると起動されるイベント。
`onError`	COMPONENT	コンポーネントに検証エラーがあると起動されるイベント。
`onClearErrors`	COMPONENT	いずれかの検証エラーをクリアする必要がある場合に起動されるイベント。
`change`	COMPONENT	ユーザが入力のコンテンツを変更したときに起動されるイベント。
`copy`	COMPONENT	ユーザがコンテンツをクリップボードにコピーすると起動されるイベント。
`paste`	COMPONENT	ユーザがクリップボードからコンテンツを貼り付けると起動されるイベント。

Lightning コンポーネント開発者ガイド

ui:inputTextArea

属性

イベント