1

Is it possible to do with lightning component?

I have a text area with 20,000 character limit. While user types in / paste the content, it should show the decremented count below the text area.

Example: 12,300 characters remaining 0 characters remaining

<label class="slds-form-element__label" for="textarea-id-01">Description</label>
<span class="slds-form-element__control" >
<textarea id="textarea-id-01" style="height: 206px;" class="slds-textarea" placeholder="Placeholder Text"></textarea>
<span class="floatToRight">20,000 characters remaining</span>
</span>

2 Answers 2

6

You can actually use binding to achieve it :

<aura:attribute name="textAreaValue" type="String" default="Default text"/>

<lightning:textarea  name="myTextArea" value="{!v.textAreaValue}" label="Type something" />

<span class="floatToRight">{!20000-v.textAreaValue.length} characters remaining</span>
1
  • this worked like a charm and such a simple solution. Thank you. Jul 11, 2017 at 14:35
4

Try using ui:inputTextArea with a component attribute like so:

<aura:attribute name="charsRemaining" type="Integer" />

<label class="slds-form-element__label" for="textarea-id-01">Description</label>
<span class="slds-form-element__control" >
<ui:inputTextArea aura:id="textarea" value="My text area" label="Type something" 
        keyup="{!c.handleKeyup}" />
<span class="floatToRight">{!v.charsRemaining} characters remaining</span>
</span>

And then in your javascript controller, the following simple code:

({
  handleKeyup : function(component, event, helper) {
    var elem = event.getSource().get('v.value');
    var max = 12000;
    var remaining = max - elem.length;

    component.set('v.charsRemaining', remaining);
  }
})

Voila!

1
  • This works, but you need to add updateOn="keyup" to the inputTextArea for the event.getSource().get('v.value'); to get the correct length. The default is updateOn="change" Feb 7, 2018 at 17:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .