发表新帖
发表新帖

How to add placeholder attribute to JSF input component?

后端 未结
关注
9 809
耶瑟儿～
耶瑟儿～ 2020-11-28 09:19

Shouldn\'t this line of code render a inputtext field with the placeholder text \"fill me\" when using html5?
相关标签:
9条回答
  • 说谎
    2020-11-28 09:32

    I thought everything that was not JSF was passed to the browswer for rendering?

    This assumption is thus wrong. Unspecified component attributes are ignored by the JSF renderers.

    You have basically the following options to get it to work:

    1. If you're already on JSF 2.2 or newer, set it as a passthrough attribute.

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

<h:inputText a:placeholder="fill me" />

      Note that I use a XML namespace prefix of a ("attribute") instead of p as shown in the tutorial, as it would otherwise clash with default XML namespace prefix p of PrimeFaces.

    2. Implement a custom renderer for <h:inputText> wherein you explicitly check and write the attribute.

    3. Implement a custom component which uses the aforementioned custom renderer.

    4. Implement a JS based solution wherein you grab the element from DOM and explicitly set the attribute.

    5. Look for a component library which supports this out the box. PrimeFaces for example has a <p:watermark> for this purpose with nice JS based graceful degradation for browsers which does not support the placeholder attribute on inputs.

    6. Look for a render kit which adds HTML5 support to standard component set. OmniFaces for example has a Html5RenderKit for this purpose.

    See also:

    • Custom HTML tag attributes are not rendered by JSF
    0 讨论(0)
  • 不知归路
    2020-11-28 09:45

    It's very easy and browser independent code as BaluSc told, In primefaces, use p:watermark to get the required functionality. Official Demo is HERE

    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-11-28 09:45

    Use primeface 4.0. Versions below this version do not support the placeholder attribute.

    1. use name space xmlns:pt="http://java.sun.com/jsf/passthrough".

    2. p:inputTextarea id="textAreaValue" pt:placeholder="your text"

      don't insert a new line in inputTextArea.

    0 讨论(0)
  • 情话喂你
    2020-11-28 09:46

    With JSF 2.2 you can passthrough unspecified attributes like this:

    <html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
>

    <h:inputText p:placeholder="fill me"></h:inputText>
    0 讨论(0)
  • 渐次进展
    2020-11-28 09:47

    You can achieve it either with placeholder attribute or with p:watermark if using Primefaces and JSF 2.0+ or, when JSF 2.2 available, you can use pt:placeholder attribute.

    Primefaces

    <p:inputText id="search_input_id" value="#{watermarkBean.keyword}" 
    required="true" label="Keyword" placeholder="fill me" />

    Legacy browser support (Adds JS solution):

    <p:inputText id="search_input_id" value="#{watermarkBean.keyword}" 
    required="true" label="Keyword" />  
<p:watermark for="search_input_id" value="fill me" />

    JSF 2.2 (without PF)

    <html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
    </h:head>
    <h:body>
        <h:inputText value="#{bean.value}" pt:placeholder="fill me"/>
    </h:body>
</html>

    Which basically generates an HTML 5 

    <input placeholder="fill me" />

    Check out this answer.

    0 讨论(0)
  • 挽巷
    2020-11-28 09:47

    In case you are using RichFaces, starting in version 4.3, you can use the tag "rich:placeholder" for this purpose as shown here. Basically:

    <h:inputText id="myInput">
    <rich:placeholder value="My placeholder text"></rich:placeholder>
</h:inputText>
    0 讨论(0)
 看不清?
提交回复
热议问题