Used and total character count in PrimeFaces inputTextarea counterTemplate

Question

I have a question regarding primefaces. I have a textbox and I needed a character limit within that textbox as well as output text giving the current character status.

Currently, my counter looks like this:

Rather than a character countdown, I would prefer a countup. Something more like "32/50 characters used".

Here is the bit of code I did to make this:

<p:inputTextarea id="recommendedToolsOther" rows="4"
    style="vertical-align: top; width: 98% !important;" styleClass="preformatted"
    autoResize="false" value="#{rfeBean.rfe.otherRecommendedTools}"
    disabled="#{!rfeBean.recommendedToolsChecked[ReferralTemplateConstants.RECOMMENDED_TOOLS_HAND_OTHER]}"
    counter="displayRecTools" maxlength="50"
    counterTemplate="{0} characters remaining">
    <p:ajax event="change" update="recommendedToolsOther"/>
</p:inputTextarea>
<br/>
<h:outputText id="displayRecTools" />

I have an idea of how I can do this. The variable that represents the number of characters remaining is represented by R. The amount of characters used is represented by U.
I would need to do this: U = (C-50)*(-1)

I'm just not sure how to do algebra like that on primefaces.

Answer 1

I don't think its possible with the PF counter... if you wanna fall back to jQuery this works for me:

<p:inputTextarea id="textarea" maxlength="20" onfocus="updateCount()" onkeyup="updateCount()"/>
<div id="counter"/>

with

<script>
    function updateCount() {
        $("[id$='counter']").html($("[id$='textarea']").val().length + "/" + $("[id$='textarea']").attr('maxlength') + " characters used");
    }
</script>

Answer 2

This can be done with a simple overriding of the updateCounter function of the PrimeFaces 'inputTextarea' widget:

Replacing

var remainingText = this.cfg.counterTemplate.replace('{0}', remaining);

with

var remainingText = this.cfg.counterTemplate.replace('{0}', remaining).replace('{1}', length).replace('{2}', this.cfg.maxlength);

Will give you the option to use {1} for the used length and {2} for the configured max length.

An example of the counterTemplate would be

"This textArea has used {1} of {2} characters, so {0} are remaining"

So the full function override becomes

PrimeFaces.widget.InputTextarea.prototype.updateCounter = function() {
    var value = this.normalizeNewlines(this.jq.val()),
    length = value.length;

    if(this.counter) {
        var remaining = this.cfg.maxlength - length;
        if(remaining < 0) {
            remaining = 0;
        }

        var remainingText = this.cfg.counterTemplate.replace('{0}', remaining).replace('{1}', length).replace('2', this.cfg.maxlength);

        this.counter.html(remainingText);
    }
}

Include this in the correct place to override the existing one and it will work

Soooo easy to use the source to find solutions...