【问题标题】:How to set maxlength attribute on h:inputTextarea如何在 h:inputTextarea 上设置 maxlength 属性
【发布时间】:2011-06-22 20:30:30
【问题描述】:

如何限制<h:inputTextarea> 的长度?对于<h:inputText>,它适用于maxlength 属性。但是,该属性在<h:inputTextarea> 中不可用。

【问题讨论】:

    标签: validation jsf-2 textarea maxlength


    【解决方案1】:

    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 本身已经不支持它。它仅在 &lt;input&gt; 元素上受支持,&lt;textarea&gt; 元素上不支持。这也是该 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));
        }
    });
    

    【讨论】:

      【解决方案2】:
      <h:inputTextarea  required="true" cols="50" rows="5" id=”aboutMe” value="#{person.aboutMe}”>
                <f:validateLength maximum="400" minimum="20"/>
          </h:inputTextarea>
      

      【讨论】:

      • 我不想涉及人脸验证,有兴趣输入更多内容不会是物理可能性
      • 不要中继客户端脚本。
      • 不依赖于客户端脚本/标签/属性单独,但是除了服务器端之外还有也不错检查
      【解决方案3】:

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

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

      尽管主题不同,this 文章的前几段对 JavaScript 行为进行了解释。还有一些关于这个确切问题的 cmets 可能有用。

      【讨论】:

        猜你喜欢
        • 2011-11-07
        • 1970-01-01
        • 1970-01-01
        • 2021-05-29
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多