Question

我有一个h：inputTextArea，我想在它上面添加一个标有左边字符的标签，当输入一个新字符时，它会从400倒数到0。我不知道如何才能将这个功能添加到我的h：inputTextArea中。我是否需要一些javascript（此功能不应刷新页面）？

有什么建议吗？

现有的验证器怎么样，它能够做到这一点吗？

<h:inputTextarea id="offerDescription" value="#{newOfferSupportController.offerDescription}" validator="#{newOfferSupportController.validateDescription} "/>

Answer 1

您可以使用JSF的ajax支持，以便在用户键入内容时重新呈现倒计时消息。您重新呈现的控件将简单地计算消息的大小并显示该消息。一个Javascript解决方案会更有效，但这种方法避免了一些跨浏览器的愚蠢。

<h:inputTextarea id="tweet" style="width: 400px;" value="#{yourPageBean.tweet}">
    <f:ajax event="keydown" render="charactersRemaining"/>
    <f:ajax event="keyup" render="charactersRemaining"/>
</h:inputTextarea>
<h:outputText id="charactersRemaining" value="#{yourPageBean.charactersRemaining}"/> characters left

Answer 2

<textarea>倒计时效果的复杂性源于这样一个事实：几乎令人难以置信的是，浏览器报告<textarea>元素值的长度不一定是他们发送的字符串的实际长度发布表单时返回服务器。

Here是一个证明问题的jsfiddle。如果在<textarea>中键入一些字符，页面中的脚本将使用字段值的当前长度更新计数器。键入几个字符，在两次之间点击“Enter”。注意报告的长度。（明确地点击“Enter”很重要，因为问题涉及明确的换行符。）

如果您再单击“开始”，服务器将使用HTTP请求内容进行响应。计算“b”值（表单中<textarea>的名称）的大小。请特别注意，换行符是作为双字符序列发送的。但是，浏览器将嵌入的换行计为单个字符。因此，每个嵌入的显式换行符导致报告的长度比实际提交的长度小1。

这种差异可能很重要，具体取决于从HTTP请求正文中提取参数时服务器上发生的情况。我想一些服务器端环境可能会将CR-LF对折叠成普通的LF字符，从而使有效的字符串长度与表单提交之前浏览器报告的内容一致。但是，根据我的经验，这不会自动发生，事实上你可能真的不想要这种行为。您的服务器将在保存之前检查长度，或者至少数据库服务器将在最终目标是具有最大长度的文本列的情况下检查长度，但是对于页面上的验证代码而言，仅报告确定情况的错误形式这与服务器发回的一个令人讨厌的错误相矛盾。

许多用于提供计数器的现成JavaScript工具都不会解释这种行为。

Answer 3

请查看Count characters in textarea以查找正在查找的JavaScripts。

Answer 4

有jQuery plugin这样做并且易于使用。 here is another plugin可以轻松完成您想要的任务。

文本区域字符countDown

4 个答案: