Newer Version Available

This content describes an older version of this product. View Latest

ui:outputTextArea

Displays the text area as specified by the value attribute.

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. A ui:outputTextArea component displays URLs and email addresses as hyperlinks.

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>
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})

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.
linkify Boolean Indicates if the URLs in the text are set to render as hyperlinks.
value String The text to display. Yes

Events

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