InputText 组件中的默认文本（占位符）

Posted 2023-02-23

【中文标题】InputText 组件中的默认文本（占位符）

【英文标题】：Default text (placeholder) in InputText component

【发布时间】：2013-08-16 10:15:03

【问题描述】：

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

当用户单击文本字段时，该文本应该消失。 当他在没有输入任何内容的情况下点击外面时出现。

如果用户提交的表单没有任何值，则不应将此默认值设置为 Bean 的属性。

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

【问题讨论】：

在基本的 html 术语中，这个东西被称为“占位符”。这个新的搜索关键字应该会为您提供线索。

<p:watermark for="search_input_id" value="search" />

@XtremeBiker - 为什么不发布答案？

完成。正如@BalusC 所说，这个问题的线索关键字是 placeholder 词。我建议 Kishor P 更改问题标题，以某种方式包含此内容。

【参考方案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"命名空间添加到你的页面，你可以通过以下方式实现JSFh:inputText和Primefacesp:inputText：

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

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

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

这会创建带有placeholder 属性的HTML 5 based 输入：

<input placeholder="search"> 

【讨论】：

好答案。请注意，OP 标记了 JSF 2.2，它提供了一个标准的替代方案。我不能 100% 确定 OP 标记 JSF 2.2 是因为他真的在使用它，还是因为他想得到更多关注。我没有在问题文本中看到任何内容，也没有在以前提出的问题中看到任何再次证实他确实在使用 JSF 2.2 的内容。

如果您考虑，请随时编辑我的答案或发布一个新答案；-)

@BalusC ：我没有完全理解你的评论！！你能详细说明一下吗？我不应该标记 JSF2.2 吗？目前我当前的 JSF 版本是 2.1，但如果提供可行的解决方案，我愿意升级！

@Kishor：该评论针对的是该答案的第一个版本，在编辑之前。点击答案下方“X 小时前编辑”后面的链接并向下滚动查看。

不，如果您不使用 JSF 2.2 并且问题不是专门针对 JSF 2.2，那么您绝对不应该标记它。您也不会标记 C#、android、GWT 等，对吗？不要为了引起注意而滥用标签。

【参考方案2】：

一个 jQuery 调整将是：

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

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