文本区字符countDown

Question

我有一个h:inputTextArea，我想在它上面添加一个小标签，上面写着左边的字符，当输入一个新字符时，它从400倒数到0。我不知道如何将这个特性添加到我的h:inputTextArea中。我需要一点javascript吗(这个功能不应该刷新页面)？

有什么建议吗？

那么已经存在的验证器呢，它能做这样的事情吗？

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

Answer 1

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

Here是一个演示这个问题的jsfiddle。如果您在<textarea>中键入一些字符，则页面中的脚本将使用该字段值的当前长度更新计数器。输入几个字符，在中间按几下"Enter“键。请注意报告的长度。(显式地按"Enter“很重要，因为问题涉及显式换行符。)

如果您随后单击"Go"，服务器将使用HTTP请求内容进行响应。计算"b“(表单中<textarea>的名称)的值的大小。特别要注意，换行符是作为两个字符的序列发送的。但是，浏览器将嵌入的换行符视为单个字符。因此，每个嵌入的显式换行符都会导致报告的长度比实际提交的长度少1。

这种差异可能很重要，这取决于从HTTP请求正文中提取参数时服务器上发生的情况。我想一些服务器端环境可能会将CR-LF对折叠成普通的LF字符，从而获得与提交表单之前浏览器报告的字符串长度一致的有效字符串长度。然而，根据我的经验，这并不是自动发生的，实际上你可能真的不想要这种行为。您的服务器将在保存之前检查长度，或者至少在最终目标是具有最大长度的文本列的情况下数据库服务器会检查长度，但是页面上的验证代码报告OK的情况是不好的，结果却被服务器返回的严重错误所抵触。

许多用于提供计数器的现成JavaScript工具都没有考虑到这种行为。

Answer 2

您可以使用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 3

看看Count characters in textarea中是否有一些JavaScripts在做你想要的事情。