Input Text Area
HTML textarea element that can be editable or read-only. Scroll bars may not appear on Chrome browsers in Android devices, but you can select focus in the textarea to activate scrolling.
Component
<aura:component>
<ui:inputTextArea aura:id=”comments” label=”Comments” value=”My comments” rows=”5″/>
<ui:button class=”btn” label=”Submit” press=”{!c.setOutput}”/>
<div aura:id=”msg” class=”hide”>
You entered: <ui:outputTextArea aura:id=”oTextarea” value=””/>
</div>
</aura:component>
Controller :
({
setOutput : function(component, event, helper) {
var cmpMsg = component.find(“msg”);
$A.util.removeClass(cmpMsg, ‘hide’);
var comments = component.find(“comments”).get(“v.value”);
var oTextarea = component.find(“oTextarea”);
oTextarea.set(“v.value”, comments);
}
})
CSS :
.THIS.hide {
display: none;
}
.THIS.btn {
margin-bottom: 10px;
}
.THIS label.uiLabel {
padding-right: 12px;
}
.THIS textarea {
border: 1px solid #dce4ec;
border-radius: 4px;
width: 200px;
}
– Yeshas [10/30/2018]