jquery - InputText 组件中的默认文本(占位符)

Question

我想在 JSF/Primefaces inputText 组件中显示默认的信息文本。

• 当用户单击文本字段时，此文本应该消失。
• 当他点击外部而不输入任何内容时出现。
• 如果用户提交的表单没有任何值，则不应将此默认值设置为 Bean 的属性。

我知道在 ManagedBean 中将默认值设置为 BeanProperty 是可行的，但我不希望这样。
如果可能的话，请建议任何 JQuery 调整。
如果此问题重复，请将我重定向到正确的问题。

Answer 1

Primefaces 在其最新版本中提供了一个 placeholder 属性，您可以将其用于 p:inputText。另外，还有一个p:watermark组件，它创建基于 JS 的解决方案以实现旧版浏览器兼容性。因此，您不一定需要在支持 bean 中设置默认值。只需使用以下解决方案之一:

<h:outputLabel value="Search: "/>  
<p:inputText id="search_input_id" value="#{watermarkBean.keyword}" 
    required="true" label="Keyword" placeholder="search" />  

对于旧版浏览器:

<h:outputLabel value="Search: "/>  
<p:inputText id="search_input_id" value="#{watermarkBean.keyword}" 
    required="true" label="Keyword" />  
<p:watermark for="search_input_id" value="search" />

此外，如果使用 JSF 2.2，您可以使用它的 passthrough 属性。在页面中添加 xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" 命名空间，可以通过以下方式实现，均针对JSF h:inputText 和 Primefaces p:输入文本:

<h:inputText value="#{watermarkBean.keyword}"
    pt:placeholder="search" />

或者使用 TagHandler 将其包装到标签中:

<h:inputText value="#{watermarkBean.keyword}">
    <f:passThroughAttribute name="placeholder"
        value="search"/>
</h:inputText>

这会创建 HTML 5 based使用 placeholder 属性输入:

<input placeholder="search">