How to add placeholder attribute to JSF input component?

Question

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?

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: http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/h/inputText.html — Bhesh Gurung, Dec 13 '11 at 18:41
@gurung: a composite is not possible if the standard components/renderers already don't support it. See also http://stackoverflow.com/questions/6822000/when-to-use-uiinclude-tag-files-composite-components-and-or-custom-componen — BalusC, Dec 13 '11 at 18:48
@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. — Bhesh Gurung, Dec 13 '11 at 18:52

BalusC · Accepted Answer · 2021-04-18T11:27:08.890

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:

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.
Implement a custom renderer for <h:inputText> wherein you explicitly check and write the attribute.
Implement a custom component which uses the aforementioned custom renderer.
Implement a JS based solution wherein you grab the element from DOM and explicitly set the attribute.
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.

1

[an implementaion for option one](http://stackoverflow.com/questions/6859520/adding-custom-attribute-html5-support-to-jsf-2-0-uiinput-component) – Sam Hasler Jul 11 '12 at 15:19
gtk, we're using myfaces so I ended up subclassing org.apache.myfaces.renderkit.html.HtmlTextRenderer – Sam Hasler Jul 12 '12 at 08:36
1

@Sam: it's not JSF impl specific. – BalusC Jul 13 '12 at 00:24
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. – Sam Hasler Aug 09 '12 at 11:59
here is the link for : http://www.primefaces.org/showcase-labs/ui/watermark.jsf – JackDev Oct 16 '12 at 22:47

score 26 · Answer 2 · edited May 23 '17 at 12:17

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.

score 9 · Answer 3 · answered Jul 30 '13 at 19:54

9

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>

answered Jul 30 '13 at 19:54

jmoreira

1,556
2
16
26

In JSF 2.3 Eclipse says: Can't find facelet tag library for uri when I use xmlns:p="http://xmlns.jcp.org/jsf/passthrough" – Hernaldo Gonzalez Jul 18 '19 at 01:20

score 8 · Answer 4 · answered Jan 02 '14 at 14:42

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>

answered Jan 02 '14 at 14:42

Jose Antonio Escobar Garcia

309
3
6

score 3 · Answer 5 · edited Jun 04 '16 at 12:59

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.

edited Jun 04 '16 at 12:59

marc_s

732,580
175
1,330
1,459

answered Jun 03 '16 at 15:24

MarcoAndresito

143
9

score 1 · Answer 6 · answered Mar 19 '15 at 06:18

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

answered Mar 19 '15 at 06:18

Mr.Chowdary

3,389
9
42
66

score 0 · Answer 7 · edited Jun 20 '20 at 09:12

0

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

use name space xmlns:pt="http://java.sun.com/jsf/passthrough".
p:inputTextarea id="textAreaValue" pt:placeholder="your text"

don't insert a new line in inputTextArea.

edited Jun 20 '20 at 09:12

Community

1
1

answered Oct 29 '14 at 15:47

Jayen Chondigara

387
4
3

The `placeholder` attribute is related with the JSF version, not with the PF one. – Aritz Feb 18 '15 at 07:07

score 0 · Answer 8 · answered May 06 '16 at 08:34

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

answered May 06 '16 at 08:34

Ayoub Falah

484
3
19

score -1 · Answer 9 · answered Apr 24 '16 at 14:38

-1

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

This works right for me, try it!

answered Apr 24 '16 at 14:38

Haftom Tesfay

7
1

1

does not have any attribute like placeholder then how it worked for you...!!!??? – Harshal_Kalavadiya Sep 11 '18 at 09:42

How to add placeholder attribute to JSF input component?

9 Answers9

See also:

Linked

Related