如何将占位符属性添加到 JSF 输入组件？答案

【问题标题】：How to add placeholder attribute to JSF input component?如何将占位符属性添加到 JSF 输入组件？
【发布时间】：2012-01-19 14:59:14
【问题描述】：

这行代码不应该在使用 html5 时呈现一个带有占位符文本“填充我”的 inputtext 字段吗？

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

我没有看到任何占位符文本。我以为所有不是 JSF 的东西都被传递给浏览器进行渲染？

【问题讨论】：

您必须使用该标签支持的属性之一。或者您可以制作自己的自定义组件（或复合组件）来支持该属性。您可以在此处查看有效属性列表：docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/…
@gurung：如果标准组件/渲染器已经不支持它，那么复合是不可能的。另见stackoverflow.com/questions/6822000/…
@BalusC：哦，是的，我什至没有想到它会是同一个组件，即使在复合合成中也会使用。再次感谢您的提醒。

标签： jsf placeholder

【解决方案1】：

我以为所有不是 JSF 的东西都被传递到浏览器进行渲染？

因此这个假设是错误的。 Unspecified 组件属性被 JSF 渲染器忽略。

您基本上有以下选择来让它工作：

如果您已经使用 JSF 2.2 或更高版本，请将其设置为 passthrough attribute。
```
 <... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">

 <h:inputText a:placeholder="fill me" />
```
请注意，我使用 XML 命名空间前缀 a（“属性”）而不是教程中所示的 p，否则它会与 PrimeFaces 的默认 XML 命名空间前缀 p 发生冲突。
为<h:inputText> 实现一个自定义渲染器，您可以在其中显式检查和写入属性。
实现一个使用上述自定义渲染器的自定义组件。
实现一个基于 JS 的解决方案，您可以从 DOM 中获取元素并显式设置属性。
寻找支持此功能的组件库。例如，PrimeFaces 有一个 <p:watermark> 用于此目的，并为不支持输入的 placeholder 属性的浏览器提供基于 JS 的优雅降级。

另见：

Custom HTML tag attributes are not rendered by JSF

【讨论】：

an implementaion for option one
gtk，我们使用的是 myfaces，所以我最终继承了 org.apache.myfaces.renderkit.html.HtmlTextRenderer
@Sam：这不是 JSF impl 特有的。
我们使用的是 JSF 1.2，看起来需要 2.0，所以我必须自己编写。如果我们升级，那么我一定会切换到它。
这里是的链接：primefaces.org/showcase-labs/ui/watermark.jsf

【解决方案2】：

使用 JSF 2.2，您可以像这样传递未指定的属性：

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

【讨论】：

在 JSF 2.3 Eclipse 中说：当我使用 xmlns:p="xmlns.jcp.org/jsf/passthrough"时找不到 uri 的 facelet 标记库

【解决方案3】：

如果使用 Primefaces 和 JSF 2.0+，您可以使用 placeholder 属性或 p:watermark 来实现它，或者当 JSF 2.2 可用时，您可以使用 pt:placeholder 属性。

Primefaces

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

旧版浏览器支持（添加 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（无 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>

这基本上会生成一个 HTML 5

<input placeholder="fill me" />

查看this的答案。

【讨论】：

【解决方案4】：

如果您使用的是 RichFaces，从 4.3 版开始，您可以为此使用标签“rich:placeholder”，如 here 所示。基本上：

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

【讨论】：

【解决方案5】：

使用 primeface 4.0。此版本以下的版本不支持占位符属性。

使用名称空间xmlns:pt="http://java.sun.com/jsf/passthrough"。
p:inputTextarea id="textAreaValue" pt:placeholder="your text"

不要在inputTextArea 中插入新行。

【讨论】：

placeholder 属性与 JSF 版本有关，与 PF 版本无关。

【解决方案6】：

正如 BaluSc 所说，这是非常简单且独立于浏览器的代码，在 primefaces 中，使用 p:watermark 来获得所需的功能。官方Demo是HERE

【讨论】：

【解决方案7】：

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

这很适合我，试试吧！

【讨论】：

没有像占位符这样的任何属性，那么它是如何为你工作的......!!!???

【解决方案8】：

使用占位符文本呈现输入字段的最简单方法是使用基本输入标记

例子：

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

注意：您不必包含任何命名空间

【讨论】：

【解决方案9】：

试试这个

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

使用 jQuery，这很适合我。

【讨论】：