如何将placeholder属性添加到JSFinput组件?

当使用html5时,不应该使用占位符文本填充我的input文本字段?

<h:inputText placeholder="fill me" /> 

我没有看到任何占位符文本。 我以为所有不是JSF的东西都传递给了浏览器来渲染?

我认为所有不是JSF的东西都被传递给了browswer来渲染?

这个假设是错误的。 未指定的组件属性被JSF渲染器忽略。

你基本上有以下选项来使其工作:

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

     <... xmlns:a="http://xmlns.jcp.org/jsf/passthrough"> <h:inputText a:placeholder="fill me" /> 

    请注意,如本教程中所示,我使用(“属性”)的XML名称空间前缀代替p ,因为否则会与PrimeFaces的默认XML名称空间前缀p冲突。

  2. <h:inputText>实现一个自定义的渲染器,在其中明确地检查和写入属性。

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

  4. 实现一个基于JS的解决scheme,其中您从DOM中获取元素并显式设置属性。

  5. 寻找一个支持这个框的组件库。 PrimeFaces例如有一个<p:watermark>用于这个目的与良好的基于​​JS的优雅退化的浏览器不支持inputplaceholder属性。

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

也可以看看:

  • 自定义HTML标记属性不是由JSF呈现的

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

Primefaces

 <p:inputText id="search_input_id" value="#{watermarkBean.keyword}" required="true" label="Keyword" placeholder="fill me" /> 

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

 <p:inputText id="search_input_id" value="#{watermarkBean.keyword}" required="true" label="Keyword" /> <p:watermark for="search_input_id" value="fill me" /> 

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> 

这基本上生成一个HTML 5

 <input placeholder="fill me" /> 

看看这个答案。

有了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> 

如果您使用RichFaces ,从版本4.3开始,您可以使用“rich:placeholder”标签来实现此目的,如下所示。 基本上:

 <h:inputText id="myInput"> <rich:placeholder value="My placeholder text"></rich:placeholder> </h:inputText> 

这是非常容易和浏览器独立的代码BaluSc告诉,在primefaces,使用p:watermark来获得所需的function。 官方演示在这里

尝试这个

 <h:inputText id="name" value="#{login.userId}" class="aux1" /> <h:inputSecret id="password" value="#{login.password}" redisplay="true" class="aux2" autocomplete="off" /> <script> $('.aux1').attr('placeholder', 'Introducir Usuario'); $('.aux2').attr('placeholder', 'Introducir Contraseña'); </script> 

用jQuery,这适用于我。

使用primeface 4.0。 此版本以下的版本不支持占位符属性。

  1. 使用名称空间xmlns:pt="http://java.sun.com/jsf/passthrough"

  2. p:inputTextarea id="textAreaValue" pt:placeholder="your text"

    不要在inputTextArea插入新行。

 <h:head> </h:head> <h:body> <h:inputText value="#{bean.value}" placeholder="fill me"/> </h:body> 

这适用于我,试试吧!

使用占位符文本呈现input字段的最简单方法是使用基本input标记

例:

 <input type="text" placeholder="Fill me" value="#{EL}"/> 

注意:您不必包含任何名称空间