文本区域字符倒计时
我有 ah:inputTextArea，我想在它上面添加一个小标签，上面写着剩余字符，当输入新字符时，它会从 400 倒数到 0。我不知道如何将此功能添加到我的 h:inputTextArea 中。我是否需要一些 javascript（此功能不应刷新页面）？
有什么推荐吗？
现有的验证器怎么样，它有能力做这样的事情吗？
<h:inputTextarea id="offerDescription" value="#{newOfferSupportController.offerDescription}" validator="#{newOfferSupportController.validateDescription} "/>
I have a h:inputTextArea and i want to add on top of it a little label that says characters left, and it counts down from 400 to 0 when a new character is entered. I have no idea how can i add this feature at all to my h:inputTextArea. Do i need a bit of javascript for that(This feature should not refresh the page)?
Any recommendation?
What about the already existing validator, is it capable of doing such thing?
<h:inputTextarea id="offerDescription" value="#{newOfferSupportController.offerDescription}" validator="#{newOfferSupportController.validateDescription} "/>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以使用 JSF 的 ajax 支持来使倒计时消息在用户键入内容时重新呈现。您重新呈现的控件将简单地计算消息的大小并显示它。 Javascript 解决方案会更有效，但这种方法避免了一些跨浏览器的愚蠢行为。
You could use JSF's ajax support to cause your countdown message to re-render whenever the user types something. The control that you re-render would simply count the size of the message and display that. A Javascript solution would be more efficient but this approach avoids some of the cross-browser silliness.
这里是一个演示该问题的jsfiddle。如果您在
如果您随后单击“Go”，服务器将响应 HTTP 请求内容。计算“b”值的大小（表单中
这种差异可能很重要，具体取决于从 HTTP 请求正文中提取参数时服务器上发生的情况。我想某些服务器端环境可能会将 CR-LF 对折叠为普通的 LF 字符，从而使有效字符串长度恢复与表单提交之前浏览器报告的长度一致。然而，根据我的经验，这不会自动发生，事实上你可能真的不想要这种行为。无论如何，您的服务器在保存之前都会检查长度，或者如果最终目标是具有最大长度的文本列，那么至少数据库服务器会检查长度，但页面上的验证代码仅报告正常情况是一种不好的形式这与从服务器返回的令人讨厌的错误相矛盾。
许多提供计数器的现成 JavaScript 工具无法解释这种行为。
A complication of
<textarea>countdown effects stems from the fact that, almost unbelievably, the length that browsers report for a<textarea>element value is not necessarily the actual length of the string that they'll send back to the server when the form is posted.Here is a jsfiddle that demonstrates the issue. If you type some characters into the
<textarea>, the script in the page will update a counter with the current length of the field's value. Type in a couple of characters, hitting "Enter" in between a couple times. Note the length reported. (Hitting "Enter" explicitly is important, as the problem involves explicit newlines.)If you then click "Go", the server will respond with the HTTP request contents. Count the size of the value of "b" (the name of the
<textarea>in the form). Note in particular that newlines are sent as two-character sequences. The browser, however, counts embedded newlines as a single character. Thus, each embedded explicit newline causes the reported length to be 1 less than the length that'll actually be submitted.That discrepancy can be important, depending on what happens at your server when the parameter is extracted from the HTTP request body. I imagine some server-side environments might fold the CR-LF pairs into plain LF characters, thus getting the effective string length back in harmony with what was reported by the browser before form submittal. However, in my experience, that doesn't happen automaticaly, and in fact you might really not want that behavior anyway. Your server will be checking the length anyway before it saves, or at least the database server will if the ultimate destination is a text column with a maximum length, but it's bad form for the validation code on the page to report an OK situation only for that to be contradicted by a nasty error coming back from the server.
Many of the off-the-shelf JavaScript tools for providing a counter do not account for this behavior.
查看计算文本区域中的字符，了解一些执行您正在查找的操作的 JavaScript。
Have a look at Count characters in textarea for some JavaScripts doing what you are looking for.
有一个 jQuery 插件 可以做到这一点并且易于使用。
这是另一个插件，可以轻松完成您想要的事情。
There is a jQuery plugin that does this and is easy to use.
And here is another plugin that does what you want quite easily.