h：inputText - jsf不呈现占位符

Question

我想创建一个landingPage，我想通过jsf 2.0和Primefaces 3.5将数据保存在我的数据库中

我的页面* .xhtml页面如下所示：

但是，我想让它看起来像我的HTML页面：

除了CSS我的h：inputText应该包含一个占位符。我的代码如下所示：

<h:form class="homepage_invitee_form" action="" method="POST">
    <h:inputText name="email" placeholder="Email Address"
                 id="email_address_new" type="text placeholder" />
    <br />
    <h:inputText name="firstName" placeholder="First Name"
                 id="firstname_new" type="text placeholder" />
    <h:inputText name="lastName" placeholder="Last Name"
                 id="lastname_new" type="text placeholder" />
    <br />
    <h:button value="Request Invitation" type="submit" class="btn btn-primary opal_btn"
              id="submit_form_new" />
</h:form>

如您所见，占位符属性未呈现。我真的很感激如何正确地渲染它。

更新

我的HTML代码如下所示：

<form class="homepage_invitee_form" action="" method="POST">
    <input name="email" placeholder="Email Address" id="email_address_new" type="text placeholder"><br>
    <input name="firstName" placeholder="First Name" id="firstname_new" type="text placeholder">
    <input name="lastName" placeholder="Last Name" id="lastname_new" type="text placeholder"><br> 
    <button type="submit" class="btn btn-primary opal_btn" id="submit_form_new">Request Invitation</button>
</form>

Answer 1

在xhtml中使用 p：watermark 而不是占位符。其他视觉设计完全与你的css有关。

此处查看此primefaces showcase

Answer 2

对于JSF 2.2 （JEE 7），您可以使用命名空间

xmlns:p="http://xmlns.jcp.org/jsf/passthrough"

然后使用它，例如：

<h:inputText value="#{bean.field}" p:placeholder="supply value"/>

将其传递给生成的HTML（NB：HTML 5 属性）。

请参阅http://www.adam-bien.com/roller/abien/entry/jsf_2_2_and_html。

Answer 3

我遇到了同样的问题并修复了它。您可能没有在该标记上使用正确的xmln名称空间。

确保“h”xmln名称空间映射到PrimeFaces。通常这会映射到“http://java.sun.com/jsf/html”，而xmln名称空间“p”通常映射到PrimeFaces，“http://primefaces.org/ui”。如果你有正常的映射，那么你需要将该代码上的xmln更改为“p”而不是“h”：

    <h:form class="homepage_invitee_form" action="" method="POST">
       <p:inputText name="email" placeholder="Email Address"
       id="email_address_new" type="text placeholder" />
       <br />
       ...