Jochen Jochen - 1 month ago 16
HTML Question

Custom HTML tag attributes are not rendered by JSF

I want to add some iOS specific tag attributes to my login-form. If I have a look on my web page source, the attributes autocorrect, autocapitalize and spellcheck aren't there. What is the reason for this? I am using JSF 2.x.

<h:inputText id="user-name" forceId="true" value="#{login.username}" style="width:120px;"
autocorrect="off" autocapitalize="off" spellcheck="false" />

Answer

This is by design. You can only specify attributes which are supported by the JSF component itself (i.e. it's listed in the attribute list in the tag documentation). You can't specify arbitrary additional attributes, they will all be plain ignored.

There are several ways to solve this:

  1. If you're already on JSF 2.2+, simply specify it as passthrough attribute:

    <html ... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
    ...
    <h:inputText ... a:autocorrect="off" />
    

    (note that I'm using xmlns:a instead of xmlns:p to avoid clash with PrimeFaces default namespace)

    Or:

    <html ... xmlns:f="http://xmlns.jcp.org/jsf/core">
    ...
    <h:inputText ...>
        <f:passThroughAttribute name="autocorrect" value="off" />
    </h:inputText>
    

  2. Use OmniFaces Html5RenderKit. Since the 1.5 release, it supports specifying custom attributes by <context-param>. See also the showcase example or Javadoc.


  3. Create a custom renderer. You can find several concrete examples in below answers:

Comments