Question

I’m using PrimeFaces 3.4 with PrimeFaces Mobile 0.9.3. I specified maxlength in the inputText attribute, but it is not being rendered across in the HTML. My code:

<p:inputText id="price" value="#{bean.price}" styleClass="r-align" 
type="number" maxlength="9" validator="priceValidator"/>

Later I found that when I remove the “type” attribute from the tag, max length works.
Does anyone know why this is the case?

Answer 1

That’s simply because maxlength attribute is not supported on the HTML5 <input type="number"> element, so it’s reasonable to assume that PrimeFaces renderer won’t emit it.

Instead, you should be using min and max attributes. Theoretically, you should be set with

<p:inputText type="number" max="999999999" />

However, this didn’t work for me. It didn’t render the max (nor the min) attribute altogether. This is in turn likely an oversight in the PrimeFaces component. Your best bet is to report it as an issue to PrimeFaces guys.

In the meanwhile, you can work this around by providing a custom renderer like this which basically adds the min and max attributes to the list of pass thru attributes:

package com.example;

import java.io.IOException;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;

import org.primefaces.component.inputtext.InputTextRenderer;

public class MyInputTextRenderer extends InputTextRenderer {

    @Override
    protected void renderPassThruAttributes(FacesContext facesContext, UIComponent component, String[] attrs) throws IOException {
        String[] newAttrs = new String[attrs.length + 2];
        System.arraycopy(attrs, 0, newAttrs, 0, attrs.length);
        newAttrs[newAttrs.length - 2] = "min";
        newAttrs[newAttrs.length - 1] = "max";
        super.renderPassThruAttributes(facesContext, component, newAttrs);
    }

}

which you can get to run by registering it as follows:

<render-kit>
    <renderer>
        <component-family>org.primefaces.component</component-family>
        <renderer-type>org.primefaces.component.InputTextRenderer</renderer-type>
        <renderer-class>com.example.MyInputTextRenderer</renderer-class>
    </renderer>
</render-kit>

Note that passing through custom JSF component attributes will be natively supported in the upcoming JSF 2.2, which allows among others HTML5 data-* attribute freedom.

See also:

• How to let JSF pass through HTML attributes