1

I'm having a custom lightning component in which there is a rich text field present. Now I need to count the characters remaining as the user types. I found that there is no keyup function or max length attribute present in lightning:inputRichText.

Also If any inline image is added, how the character counts behave?

Any ideas would be really appreciated.

<div class="slds-form-element">
        <label class="slds-form-element__label slds-text-color_destructive slds-text-body_regular" for="textareaSample2">Body</label>
          <div>
            <lightning:inputRichText aura:id="commentBody" value="{!v.commentBody}" placeholder = "Enter your comments here">
              <lightning:insertImageButton/>
          </lightning:inputRichText>  
           </div>                    
      </div>
1

As we cannot add onKeyUp Listener on lightning:inputRichText , we will add a listener to commentBody attribute in the markup. We can do that using aura:valueChange

Markup:

 <aura:attribute name="commentBody" type="String"></aura:attribute>
 <aura:handler name="change" value="{!v.commentBody}" action="{!c.itemsChange}"/>

<div class="slds-form-element">
        <label class="slds-form-element__label slds-text-color_destructive slds-text-body_regular" for="textareaSample2">Body</label>
          <div>
            <lightning:inputRichText aura:id="commentBody" value="{!v.commentBody}" placeholder = "Enter your comments here">
              <lightning:insertImageButton/>
          </lightning:inputRichText>  
           </div>                    
</div>

Javascript :

({
    itemsChange : function(component, event, helper) {
        console.log(component.get("v.commentBody"));
        console.log(component.get("v.commentBody").length);
    }
})

Just to note, its a rich text area, so it would be HTML content so the fonts formating will increase the character length. So the number of chars looking in screen is less than actual char count in the field.

  • So can't we overcome that issue as it takes 8 characters for the first letter I typed? Or is there any possible way to overcome this? Please shed some light on this !! – uma451 Jan 31 at 11:20
  • If its rich text area you will get HTML, you can't help with that.The only thing you can do is remove HTML in Javascript and then check length. stackoverflow.com/questions/1499889/… – Pranay Jaiswal Jan 31 at 11:30
  • Ok thanks Pranay. Since it will have inline image in that I will go with as it is. Thanks alot for your explanation – uma451 Jan 31 at 11:36
1

You should be able to get the value of the lightning:inputRichText

And then find it's length:

let value = cmp.find('inputRichTextId').get("v.value");
let characterCount = value.length;
  • it works like charm. But one minor issue I'm facing is, for the first character it takes "8" as decremented count and then on it takes one. Why the first one takes that value ? – uma451 Jan 30 at 19:03
  • I'd imagine the lightning:inputRichText has wrapped the content in a html tag like <p> and then <\p> – Robs Jan 30 at 19:08
  • No Robs. I updated my question. Please check now. – uma451 Jan 31 at 10:47
0

In addition to the javascript solutions already posted, an easy way to display the remaining number of characters to the user is:

{!500 - v.commentBody.length} characters remaining

where 500 is the maxlength you want for the field. So your full markup would look like:

<div class="slds-form-element">
    <label class="slds-form-element__label slds-text-color_destructive slds-text-body_regular" for="textareaSample2">Body</label>
      <div>
        <lightning:inputRichText aura:id="commentBody" value="{!v.commentBody}" placeholder = "Enter your comments here">
          <lightning:insertImageButton/>
      </lightning:inputRichText>  
      {!500 - v.commentBody.length} characters remaining
       </div>                    
  </div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.