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 是否提供了这样的功能，还是我必须通过其他方式来实现这一点{比如编码这个功能}。

TIA

4

2 回答 2

7

<p:editor没有选择，你可以使用jquery来解决这个问题。我的解决方案是将keyup事件绑定到我刚刚测试过的编辑器，我的示例有一个表单（id：fm），一个编辑器（id：rongnk），一个输出文本（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属性的。

所以，最好的办法是附加一个 JavaScript 函数来处理change事件，方法是指定onchange="checkTextLength(this)". 要编写函数，您需要使用 PrimeFaces 的编辑器客户端 API 计算最大文本长度和当前文本长度之间的差异，并根据结果更新占位符。

于 2013-05-09T11:14:13.497 回答