Login/Register
How to add placeholder attribute to JSF input component?
Asked Answered
Solved jsfplaceholder
L

9

46

Shouldn't this line of code render a inputtext field with the placeholder text "fill me" when using html5? 

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

I do not see any placeholder text. I thought everything that was not JSF was passed to the browser for rendering?

Larondalarosa answered 13/12, 2011 at 18:28 Comment(3)
You have to use one of the attributes supported by that tag. Or you can make your own custom component (or composite component) to support that attribute. You can see the list of valid attributes here: docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/… – Hardpressed
@gurung: a composite is not possible if the standard components/renderers already don't support it. See also #6822500 – Polivy
@BalusC: Oh ya, I didn't even think about it that it's going to be the same component that will be using even in the composite comp. Thanks for the heads up again. – Hardpressed
P
72

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.

See also:

Polivy answered 13/12, 2011 at 18:39 Comment(5)
an implementaion for option one – Ensor
gtk, we're using myfaces so I ended up subclassing org.apache.myfaces.renderkit.html.HtmlTextRenderer – Ensor
@Sam: it's not JSF impl specific. – Polivy
we're on JSF 1.2 and it looks like that requires 2.0, so I had to write my own. If we upgrade then I'll definitely switch to it. – Ensor
here is the link for <p:watermark>: primefaces.org/showcase-labs/ui/watermark.jsf – Making
F
27

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.

Fatsoluble answered 15/8, 2013 at 19:39 Comment(0)
F
10

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>
Franek answered 30/7, 2013 at 19:54 Comment(1)
In JSF 2.3 Eclipse says: Can't find facelet tag library for uri when I use xmlns:p="xmlns.jcp.org/jsf/passthrough" – Pogrom
S
8

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>
Sweven answered 2/1, 2014 at 14:42 Comment(0)
B
3

Try this

<h:inputText id="name" value="#{login.userId}" class="aux1" />
<h:inputSecret id="password" value="#{login.password}" redisplay="true" class="aux2" autocomplete="off" />

<script>
  $('.aux1').attr('placeholder', 'Introducir Usuario');
  $('.aux2').attr('placeholder', 'Introducir Contraseña');
</script>

With jQuery, this works right for me.

Brassbound answered 3/6, 2016 at 15:24 Comment(0)
C
1

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

Congratulate answered 19/3, 2015 at 6:18 Comment(0)
O
0

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.

Olszewski answered 29/10, 2014 at 15:47 Comment(1)
The placeholder attribute is related with the JSF version, not with the PF one. – Fatsoluble
F
0

The simplest way to render an input field with a placeholder text is to use the elementary input tag

Example:

<input type="text" placeholder="Fill me" value="#{EL}"/>

Note: you dont have to include any namespaces

Figone answered 6/5, 2016 at 8:34 Comment(0)
P
-1

<h:head>
</h:head>
<h:body>
    <h:inputText value="#{bean.value}" placeholder="fill me"/>
</h:body>

This works right for me, try it!

Psychosomatic answered 24/4, 2016 at 14:38 Comment(1)
<h:inputText> does not have any attribute like placeholder then how it worked for you...!!!??? – Bunnybunow

© 2022 - 2024 — McMap. All rights reserved.