ui:outputTextArea | Lightning Components Developer’s Guide

A ui:outputTextArea component represents text output that is wrapped in an HTML span tag. This component can be used with ui:inputTextArea, which takes in a multi-line text input. To display text, you can use an attribute value and bind it to the ui:outputTextArea component.

1<aura:attribute name="myTextArea" type="String" default="some string"/>
2<ui:outputTextArea value="{!v.myTextArea}"/>

The previous example renders the following HTML.

1<span class="uiOutputTextArea">some string</span>

This example shows how you can bind data from the ui:inputTextArea component.

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>

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17({
18    setOutput : function(component, event, helper) {
19    	var el = component.find("msg");
20    	$A.util.removeClass(el.getElement(), 'hide');
21    	
22        var comments = component.find("comments").get("v.value");
23        var oTextarea = component.find("oTextarea");
24        oTextarea.set("v.value", comments);
25    }
26})

Attributes

Attribute Name	Attribute Type	Description	Required?
`body`	Component[]	The body of the component. In markup, this is everything in the body of the tag.
`class`	String	A CSS style to be attached to the component. This style is added in addition to base styles output by the component.
`value`	String	The text to display.	Yes

Events

Event Name	Event Type	Description
`mouseup`	COMPONENT	Indicates that the user has released the mouse button.
`mousedown`	COMPONENT	Indicates that the user has pressed a mouse key.
`mousemove`	COMPONENT	Indicates that the user has moved the mouse pointer.
`dblclick`	COMPONENT	Indicates that a component has been double-clicked.
`mouseout`	COMPONENT	Indicates that the user has moved the mouse pointer away from the component.
`click`	COMPONENT	Indicates that a component has been clicked.
`mouseover`	COMPONENT	Indicates that the user has moved the mouse pointer over the component.