文本区域字符countDown

问题描述：

我有一个h：inputTextArea，我想在它的顶部添加一个表示字符的小标签，当输入一个新字符时，它从400倒数到0。我不知道如何添加此功能到我的h：inputTextArea。我是否需要一点javascript（这个功能不应该刷新页面）？文本区域字符countDown

任何推荐？

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

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

是的，你需要使用JavaScript（最好用jQuery）。 – ThiefMaster 2011-04-28 15:18:46

小心 - 一些可用的插件（如答案中提到的jqEasy）不能正确说明浏览器处理显式输入textarea的换行符的方式。 – Pointy 2011-04-28 15:27:07

答

<textarea>倒计时效应的复杂性源于这样一个事实，几乎难以置信的是，浏览器报告的<textarea>元素值的长度不一定是实际的字符串长度，当表单返回给服务器时已过帐。

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

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

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

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

另请注意，浏览器在textareas的换行处理上有所不同。 Opera基本上做了value.replace（/ \ r \ n | \ r | \ n/g，“\ r \ n”），而Safari做了value.replace（/ \ r \ n | \ r/g，“\ n” ），而Firefox不做任何标准化，只是使用\ n。这些差异会影响计数。 – Shadow2531 2011-04-28 16:00:17

@ Shadow2531我有一些回忆，你说的是真的 - 现在尝试Opera ... – Pointy 2011-04-28 16:02:04

@Pointy，按下输入太快。更新评论。 – Shadow2531 2011-04-28 16:03:29

答

查看Count characters in textarea了解一些您正在寻找的JavaScripts。

答

有一个jQuery plugin这样做，并且易于使用。和here is another plugin可以很轻松地做你想做的事情。

对于我刚刚报告为[bug 9007]（http://bugs.jquery.com/ticket/9007）:-)的行为，这两个帐户都没有。 – Pointy 2011-04-28 16:52:36

答

您可以使用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 – sfrj 2011-05-02 18:07:24

无论按什么按钮，当重新呈现charactersRemaining组件时，都会调用您的PageBean.getCharactersRemaining（），您可以很简单地通过计算字符数yourPageBean.tweet字符串并从允许的总数中减去该值（即，返回140 - yourPageBean.tweet.size（）;）。 – 2011-05-02 18:38:24

这里的表现如何？这可以吗？ – alexander 2015-03-09 16:44:39

文本区域字符countDown

相关推荐