如何在h:inputTextarea上设置maxlength属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在h:inputTextarea上设置maxlength属性相关的知识,希望对你有一定的参考价值。

我怎样才能限制<h:inputTextarea>的长度?对于<h:inputText>,它与maxlength属性一起工作正常。但是,此属性在<h:inputTextarea>中不可用。

答案

html5 + JSF 2.2+

如果您使用的是HTML5和JSF 2.2+,请将其指定为passthrough attribute

<html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">

<h:inputTextarea value="#{bean.text}" a:maxlength="2000" />

HTML5 + JSF 2.0/2.1

如果您使用的是HTML5,但尚未使用JSF 2.2,请使用OmniFaces Html5RenderKit识别JSF 2.0 / 2.1中的新HTML5属性。

<h:inputTextarea value="#{bean.text}" maxlength="2000" />

HTML4

如果您使用的是HTML4,那么HTML本身就不支持它了。它仅支持<input>元素,而不支持<textarea>元素。这也是为什么这个HTML元素的JSF表示没有这样的属性。您需要使用JS和/或在服务器端使用JSF在客户端解决此要求。 JS使您可以立即验证长度并忽略所有其他字符。 JSF使您能够在客户端禁用或破解JS代码的情况下对其进行验证。最好是两者的结合。

假设你有一个

<h:inputTextarea value="#{bean.text}" styleClass="max">
    <f:validateLength maximum="2000" />
</h:inputTextarea>

这是你如何做jQuery

$('textarea.max').keyup(function() {
    var $textarea = $(this);
    var max = 2000;
    if ($textarea.val().length > max) {
        $textarea.val($textarea.val().substr(0, max));
    }
});
另一答案
<h:inputTextarea  required="true" cols="50" rows="5" id=”aboutMe” value="#{person.aboutMe}”>
          <f:validateLength maximum="400" minimum="20"/>
    </h:inputTextarea>
另一答案

BalusC的答案很好,但是请注意,用f:validateLength maximum="2000" />调用的JSF验证器会计算两次新行字符,而$textarea.val().length只计算一次。如果您希望两个验证器为多行输入返回相同的结果,则需要对javascript验证器中的换行符进行重复计算。

此问题的一个示例是在文本区域中输入"Hello World",其中 n实际上是换行符。这将被JSF验证器计为12个字符,但$textarea.val().length将只返回11.如果您让用户输入多个段落,这种差异显然会变得更糟。

虽然不是关于同一主题,但this文章的前两段对JavaScript行为有一个解释。关于这个可能有用的确切问题也有一些评论。

以上是关于如何在h:inputTextarea上设置maxlength属性的主要内容,如果未能解决你的问题,请参考以下文章

Web前端笔记-解决Vue编写的输入框(inputtextarea等)使用JS设置value时提交表单无效的问题

解决微信小程序inputtextarea层级过高穿透问题

解决微信小程序inputtextarea层级过高穿透问题

文本区字符倒计时

Safari中的inputtextarea无法输入的问题

去掉谷歌浏览器获取焦点时默认的inputtextarea的边框