如何将占位符属性添加到JSF输入组件?

Luc*_*uke 39 jsf placeholder

在使用html5时,这行代码不应该使用占位符文本"填充我"来呈现inputtext字段吗?

<h:inputText placeholder="fill me" />
Run Code Online (Sandbox Code Playgroud)

我没有看到任何占位符文字.我认为那些不是JSF的东西都被传递给了浏览器进行渲染?

Bal*_*usC 67

我认为那些不是JSF的东西都被传递给了浏览器以进行渲染?

因此这个假设是错误的.JSF渲染器会忽略未指定的组件属性.

您基本上有以下选项可以使其工作:

  1. 如果您已经使用JSF 2.2或更高版本,请将其设置为passthrough属性.

    <... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">
    
    <h:inputText a:placeholder="fill me" />
    
    Run Code Online (Sandbox Code Playgroud)

    请注意,我使用XML命名空间前缀a("attribute")而不是p教程中显示的内容,否则它将与pPrimeFaces的默认XML名称空间前缀冲突.

  2. 实现自定义渲染器,<h:inputText>您可以在其中显式检查和写入属性.

  3. 实现使用上述自定义渲染器的自定义组件.

  4. 实现基于JS的解决方案,其中从DOM中获取元素并显式设置属性.

  5. 寻找一个支持这个开箱即用的组件库.例如,PrimeFaces<p:watermark>为此目的提供了一个基于JS的优秀降级,适用于不支持placeholder输入属性的浏览器.

  6. 寻找一个渲染工具包,为标准组件集添加HTML5支持.OmniFaces例如有Html5RenderKit用于这一目的.

也可以看看:

  • @Sam:OmniFaces最近得到了一个"Html5RenderKit",可以在更高的层次上解决它:https://showcase-omnifaces.rhcloud.com/showcase/renderkits/Html5RenderKit.xhtml (3认同)

Xtr*_*ica 22

您可以使用placeholder属性或p:watermark使用Primefaces和JSF 2.0+ 来实现它,或者当JSF 2.2可用时,您可以使用pt:placeholder属性.

Primefaces

<p:inputText id="search_input_id" value="#{watermarkBean.keyword}" 
    required="true" label="Keyword" placeholder="fill me" />  
Run Code Online (Sandbox Code Playgroud)

传统浏览器支持(添加JS解决方案):

<p:inputText id="search_input_id" value="#{watermarkBean.keyword}" 
    required="true" label="Keyword" />  
<p:watermark for="search_input_id" value="fill me" />
Run Code Online (Sandbox Code Playgroud)

JSF 2.2(不含PF)

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
    </h:head>
    <h:body>
        <h:inputText value="#{bean.value}" pt:placeholder="fill me"/>
    </h:body>
</html>
Run Code Online (Sandbox Code Playgroud)

这基本上生成HTML 5

<input placeholder="fill me" />
Run Code Online (Sandbox Code Playgroud)

看看这个答案.


jmo*_*ira 9

使用JSF 2.2,您可以通过未指定的属性,如下所示:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
>

    <h:inputText p:placeholder="fill me"></h:inputText>
Run Code Online (Sandbox Code Playgroud)


小智 7

如果你正在使用RichFaces的,在4.3版本开始,您可以使用标记"富:占位符"为此,如图所示这里.基本上:

<h:inputText id="myInput">
    <rich:placeholder value="My placeholder text"></rich:placeholder>
</h:inputText>
Run Code Online (Sandbox Code Playgroud)


归档时间:

查看次数:

66571 次

最近记录:

8 年,11 月 前