Comment ajouter l'attribut placeholder au composant d'entrée JSF?

Question

Comment ajouter l'attribut placeholder au composant d'entrée JSF?

cette ligne de code ne devrait-elle pas rendre un champ inputtext avec le texte placé" fill me " en utilisant html5?

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

Je ne vois pas de texte placé. Je croyais que tout ce qui n'était pas JSF était passé au navigateur pour être rendu?

34

jsf placeholder

demandé sur BalusC 2011-12-13 22:28:54

9 réponses

score 59 · Answer 1

je pensais que tout ce qui n'était pas JSF était passé au browswer pour être rendu?

cette hypothèse est donc erronée. non spécifié attributs du composant sont ignorés par la JSF convertisseurs.

Vous avez les options suivantes pour le faire fonctionner:

si vous êtes déjà sur JSF 2.2 ou plus récent, définissez-le comme suit: a passthrough attribut .
```
<... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">

<h:inputText a:placeholder="fill me" />
```
notez que j'utilise un préfixe D'espace de noms XML de a ("attribut") au lieu de p comme indiqué dans le tutoriel, car il serait autrement en conflit avec le préfixe D'espace de noms XML par défaut p de PrimeFaces.
implémenter un renderer personnalisé pour <h:inputText> où vous cochez et écrivez explicitement l'attribut.
mettre en œuvre un composant personnalisé qui utilise le rendu personnalisé susmentionné.
implémentez une solution basée sur JS dans laquelle vous saisissez L'élément de DOM et définissez explicitement l'attribut.
cherchez une bibliothèque de composants qui supporte cette boîte. PrimeFaces , par exemple, a un <p:watermark> pour cette fin d' nice js basé dégradation gracieuse pour les navigateurs qui ne supporte pas l'attribut placeholder sur les entrées.
recherchez un kit de rendu qui ajoute le support HTML5 au jeu de composants standard. OmniFaces par exemple a un Html5RenderKit à cette fin.

voir aussi:

étiquette HTML personnalisée les attributs ne sont pas rendus par JSF

score 20 · Answer 2

vous pouvez l'obtenir soit avec l'attribut placeholder ou avec p:watermark si vous utilisez Primefaces et JSF 2.0+ ou, lorsque JSF 2.2 disponible, vous pouvez utiliser l'attribut pt:placeholder .

Primefaces

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

prise en charge de l'ancien navigateur (ajoute la solution JS):

<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 (sans 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>

qui essentiellement génère un HTML 5

<input placeholder="fill me" />

Check out ce réponse.

score 9 · Answer 3

avec JSF 2.2 vous pouvez passer par des attributs non spécifiés comme ceci:

<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>

score 7 · Answer 4

dans le cas où vous utilisez RichFaces , à partir de la version 4.3, vous pouvez utiliser l'étiquette" rich:placeholder "à cet effet comme indiqué ici . En gros:

<h:inputText id="myInput">
    <rich:placeholder value="My placeholder text"></rich:placeholder>
</h:inputText>

score 2 · Answer 5

Essayez cette

<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>

avec jQuery, ça me va.

score 1 · Answer 6

c'est très facile et le code indépendant du navigateur comme BaluSc dit, Dans primefaces, utilisez p:watermark pour obtenir la fonctionnalité requise. La démo officielle est ici

score 0 · Answer 7

utilisez primeface 4.0. Les Versions au-dessous de cette version ne supportent pas l'attribut placeholder.

utilisation de l'espace de nom xmlns:pt="http://java.sun.com/jsf/passthrough" .
p:inputTextarea id="textAreaValue" pt:placeholder="your text"

n'insérez pas de nouvelle ligne dans inputTextArea .

score 0 · Answer 8

la façon la plus simple de rendre un champ d'entrée avec un texte placé est d'utiliser la étiquette d'entrée élémentaire

exemple:

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

Note: vous n'avez pas à inclure d'espaces de noms

score -1 · Answer 9

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

ça marche pour moi, essaie!

Las etiquetas más populares

Comment ajouter l'attribut placeholder au composant d'entrée JSF?

9 réponses

voir aussi: