占位符在 PrimeFaces p:inputText 中不起作用

Question

我正在尝试使用 PrimeFaces inputText 文本框来获取用户输入。即使我添加了占位符属性，文本也没有出现在文本框中。我需要为此包含任何库吗？下面是我的jsf页面。

 <ui:composition template="/template/master-layout.xhtml"
            xmlns:ui="http://java.sun.com/jsf/facelets"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:p="http://primefaces.org/ui">
     <ui:define name="head">  test header </ui:define>

    <ui:define name="meta">
        <f:metadata>
            <f:event type="preRenderView" listener="#{HomeBean.initPage}"></f:event>
        </f:metadata>
    </ui:define>
      <ui:define name="mainContainer">
        <div class="row">
          <div class="col-sm-12">
            <p:inputText placeholder="Your ID" styleClass="form-control service-input-border" maxlength="20" id="Id"
               value="#{homeBean.Id}"></p:inputText>
         </div>
        </div>
    </ui:define>
</ui:composition>

Answer 1

Apostolos 的回答很好，但我更喜欢使用直通属性。您可以使用它们如果您使用的是 JSF >= JSF 2.2。

只需使用新的命名空间 http://xmlns.jcp.org/jsf/passthrough 并使用您喜欢的任何 HTML 属性（例如，任何未添加到输入/组件中的属性）。在您的情况下，它将是 placeholder。

<ui:composition template="/template/master-layout.xhtml"
        xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
        xmlns:f="http://xmlns.jcp.org/jsf/core"
        xmlns:h="http://xmlns.jcp.org/jsf/html"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">    

<!-- ... -->

<p:inputText pt:placeholder="Your ID" styleClass="form-control service-input-border"
    maxlength="20" id="Id" value="#{homeBean.Id}" />

您可以阅读有关直通属性here 和here 的更多信息。

Answer 2

你应该使用watermark标签来显示占位符。

<p:inputText styleClass="form-control service-input-border" maxlength="20" id="Id" value="#{homeBean.Id}"></p:inputText>
<p:watermark for="Id" value="Your ID" id="watermark" />

也可以查看showcase