4

以下のコードに示すように、Primefaces が p:inputTextarea に残っている文字の機能を提供していることは承知しています。

<p:inputTextarea rows="1" cols="85" counter="counter" maxlength="100" counterTemplate="{0} characters remaining" value="#{managedBean.inputvalue}" ></p:inputTextarea>
<h:outputText />
<h:outputText id="counter" />

しかし、p:editor でも同じことをしたいと思っています。どうやってするか？Primefaces はそのような機能を提供しますか、それとも {この機能のコーディングなど} 他の手段でこれを達成する必要がありますか?

ティア

4

2 に答える 2

7

<p:editorそのためのオプションはありません。jqueryを使用して解決できます。私の解決策は、テストしたばかりのエディターに keyup イベントをバインドすることです。私の例には、1 つのフォーム (id: fm)、1 つのエディター (id:rongnk)、1 つの出力テキスト (id:txt) があります。

<h:body onload="bindiframe()">
        <h:form id="fm"> 
            <p:editor id="rongnk" value="xxx">
            </p:editor>
            <h:outputText id="txt"/>
            <script type="text/javascript">
                var imax = 50;
                function bindiframe(){
                    $('#fm\\:rongnk').find('iframe').contents().find("body").on('keyup', function(e) {
                        ilength = $('#fm\\:rongnk').find('iframe').contents().find("body").text().length;
                        $('#fm\\:txt').html('Remain:' + (imax - ilength));
                    });
                }
            </script>
        </h:form>
    </h:body>
于 2013-05-09T12:00:48.930 に答える
3

<p:editor>タグのドキュメントから判断できる限り、「カウンター」機能を持つ属性はありません。それでもmaxlength属性はあります。

したがって、最善の策は、change指定してイベントを処理する JavaScript 関数をアタッチすることonchange="checkTextLength(this)"です。関数を記述するには、PrimeFaces のエディター クライアント側 API を使用して最大テキスト長と現在のテキスト長の差を計算し、結果に基づいてプレースホルダーを更新する必要があります。

于 2013-05-09T11:14:13.497 に答える