web-dev-qa-db-fra.com

Comment ajouter un attribut de marque de réservation au composant d'entrée JSF?

Cette ligne de code ne devrait-elle pas rendre un champ inputtext avec le texte fictif "Remplis-moi" lors de l'utilisation de HTML5? 

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

Je ne vois pas de texte de substitution. Je pensais que tout ce qui n'était pas JSF était transmis au navigateur pour le rendu?

jsfplaceholder
35
LuckyLuke

Je pensais que tout ce qui n'était pas JSF était transmis au navigateur pour le rendu?

Cette hypothèse est donc fausse. Unspecified Les attributs de composant sont ignorés par les rendus JSF.

Vous avez essentiellement les options suivantes pour le faire fonctionner:

  1. Si vous utilisez déjà JSF 2.2 ou une version plus récente, définissez-le comme un attribut passthrough .

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

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

    Notez que j'utilise un préfixe d'espace de nom XML a ("attribut") au lieu de p, comme indiqué dans le didacticiel, car il se heurterait sinon au préfixe d'espace de nom XML par défaut p de PrimeFaces.

  2. Implémentez un moteur de rendu personnalisé pour <h:inputText> dans lequel vous vérifiez et écrivez explicitement l'attribut.

  3. Implémentez un composant personnalisé qui utilise le moteur de rendu personnalisé susmentionné.

  4. Implémentez une solution basée sur JS dans laquelle vous extrayez l'élément de DOM et définissez explicitement l'attribut.

  5. Rechercher une bibliothèque de composants qui prend en charge cela dans la boîte. PrimeFaces a par exemple un <p:watermark> avec une dégradation progressive basée sur Nice JS pour les navigateurs ne prenant pas en charge l’attribut placeholder sur les entrées.

  6. Recherchez un kit de rendu qui ajoute la prise en charge de HTML5 au jeu de composants standard. OmniFaces par exemple a un Html5RenderKit à cet effet.

Voir également:

61
BalusC

Vous pouvez y parvenir 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 navigateurs hérités (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 génère fondamentalement un HTML 5 

<input placeholder="fill me" />

Découvrez ceci réponse.

20
Xtreme Biker

Avec JSF 2.2, vous pouvez transmettre 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>
9
jmoreira

Si vous utilisez RichFaces à partir de la version 4.3, vous pouvez utiliser la balise "rich: placeholder" comme indiqué ici ici . Fondamentalement:

<h:inputText id="myInput">
    <rich:placeholder value="My placeholder text"></rich:placeholder>
</h:inputText>
7
Jose Antonio Escobar Garcia

Essaye ça

<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, cela fonctionne pour moi.

2
MarcoAndresito

Comme le dit BaluSc, c’est très simple et très indépendant du navigateur. .__ Dans primefaces, utilisez p:watermark pour obtenir la fonctionnalité requise .. La démo officielle est ICI

1
Mr.Chowdary

Le moyen le plus simple de rendre un champ de saisie avec un texte fictif est d'utiliser la balise d'entrée elementary

Exemple:

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

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

0
Ayoub Falah

Utilisez primeface 4.0. Les versions inférieures à cette version ne prennent pas en charge l'attribut d'espace réservé.

  1. utilisez l'espace de nom xmlns:pt="http://Java.Sun.com/jsf/passthrough".

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

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

0
Jayen Chondigara