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:inputText：

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

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

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

它使用以下属性创建基于 HTML 5 的输入：placeholder

<input placeholder="search"> 

Answer 2

一个 jQuery 调整将是：

<p:inputText styleClass="search" value="#{filter.search}"/>
<script type="text/javascript">
  $('input.search).attr('placeholder','search');
</script>

您不需要放置额外的组件来仅设置属性，并且您可以大量丰富输入（如果需要）。