PrimeFaces中使用的和总字符数inputTextarea counterTemplate

Question

我对primefaces有疑问。我有一个文本框，我需要该文本框中的字符限制以及输出文本给出当前字符状态。

目前，我的计数器看起来像这样：

我宁愿计算向上，而不是字符数向下。更像是＆＃34;使用了32/50个字符＆＃34;。

以下是我为此做的一些代码：

<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" />

我知道如何才能做到这一点。表示剩余字符数的变量由R表示。使用的字符数由U表示 我需要这样做：U =（C-50）*（ - 1）

我只是不确定如何在primefaces上做代数代数。

Answer 1

我认为PF计数器不可能...如果你想回到jQuery这对我有用：

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

带

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

Answer 2

这可以通过简单覆盖updateCounter function of the PrimeFaces 'inputTextarea'小部件来完成：

更换

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

与

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

将为您提供使用{1}作为已用长度和{2}作为已配置最大长度的选项。

counterTemplate的一个例子是

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

因此完整的功能覆盖变为

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);
    }
}

将其包含在正确的位置以覆盖现有的

Soooo易于使用来源寻找解决方案......