Show decremented character count of textarea dynamically as and when user enters

Question

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>

Answer 1

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>

Answer 2

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!