文本区字符倒计时

Posted 2023-05-07

【中文标题】文本区字符倒计时

【英文标题】：Text area character countDown

【发布时间】：2011-08-14 19:45:30

【问题描述】：

我有一个 h:inputTextArea，我想在它上面添加一个小标签，上面写着剩下的字符，当输入一个新字符时，它会从 400 倒数到 0。我完全不知道如何将此功能添加到我的 h:inputTextArea 中。我需要一些 javascript 吗（此功能不应该刷新页面）？

有什么推荐吗？

现有的验证器呢，它有能力做这样的事情吗？

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

【问题讨论】：

是的，您需要为此使用 JavaScript（最好使用 jQuery）。

小心 - 一些可用的插件（如答案中提到的 jqEasy 插件）不能正确解释浏览器处理显式输入文本区域的换行符的方式。

【参考方案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

【讨论】：

如果删除键被按下怎么办？会被计为 +1 还是 -1

不管你按什么，当charactersRemaining组件被重新渲染时，它会调用yourPageBean.getCharactersRemaining()，你可以很简单地通过计算yourPageBean中的字符数来实现。推文字符串并从允许的总数中减去（即返回 140 - yourPageBean.tweet.size();）。

粘贴文本时会触发keydown和keyup事件吗？

【参考方案2】：

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

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

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

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

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

【讨论】：

另请注意，浏览器对文本区域的换行处理有所不同。 Opera 基本上执行 value.replace(/\r\n|\r|\n/g, "\r\n") 而 Safari 执行 value.replace(/\r\n|\r/g, "\n" ) 而 Firefox 不做任何规范化，只使用 \n.这些差异会影响计数。

@Shadow2531 我记得你说的是真的 - 现在尝试 Opera ...

@Pointy，按回车太快了。更新评论。

@Shadow2531 当我在 Opera 中尝试这个小提琴时，它的行为方式与 Chrome 和 Firefox 完全相同。

无论如何，关键是浏览器可能在撒谎，这必须在倒计时代码或服务器中加以说明。

【参考方案3】：

查看Count characters in textarea，了解一些 JavaScript 正在做您正在寻找的事情。

【参考方案4】：

有一个jQuery plugin 可以做到这一点并且易于使用。 here is another plugin 可以轻松完成您想要的工作。

【讨论】：

这些都不能解释我刚刚报告为bug 9007 :-)