java - 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展示

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（注意：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 地址"
       id="email_address_new" type="文本占位符" />
       <br />
       ...