Как добавить атрибут placeholder в компонент ввода JSF?

Должна ли эта строка кода визуализировать поле ввода текста с текстом заполнителя "заполнить меня" при использовании html5?

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

Я не вижу никакого текста заполнителя. Я думал, что все, что не было JSF, было передано браузеру для рендеринга?

Ответы

Ответ 1

Я думал, что все, что не было JSF, было передано в browswer для рендеринга?

Это предположение, таким образом, неверно. Unspecified атрибуты компонента игнорируются рендерерами JSF.

У вас есть в основном следующие параметры, чтобы заставить его работать:

  • Если вы уже используете JSF 2.2 или новее, установите его как атрибут passthrough.

    <... xmlns:a="http://xmlns.jcp.org/jsf/passthrough">

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

    Обратите внимание, что я использую префикс пространства имен XML a ( "attribute" ) вместо p, как показано в учебнике, так как в противном случае он столкнулся бы с префиксом пространства имен по умолчанию p в PrimeFaces.

  • Внедрите собственный рендерер для <h:inputText>, в котором вы явно проверяете и записываете атрибут.

  • Внедрение настраиваемого компонента, который использует вышеупомянутый пользовательский рендерер.

  • Внедрите решение на основе JS, в котором вы захватываете элемент из DOM и явно устанавливаете атрибут.

  • Найдите библиотеку компонентов, которая поддерживает это. PrimeFaces, например, имеет <p:watermark> для этого цель с прекрасным ухудшением JS для браузеров, который не поддерживает атрибут placeholder на входах.

  • Найдите набор рендеринга, который добавит поддержку HTML5 к стандартным наборам компонентов. OmniFaces, например, имеет Html5RenderKit для этого цель.

См. также:

Ответ 2

Вы можете достичь этого либо с помощью атрибута 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" />

Поддержка старого браузера (добавляет решение JS):

<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" />

Отметьте этот ответ.

Ответ 3

В 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>

Ответ 4

Если вы используете RichFaces, начиная с версии 4.3, для этой цели вы можете использовать тег "rich: placeholder", как показано здесь. В основном:

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

Ответ 5

Это очень простой и независимый от браузера код, как сказал BaluSc, В простых функциях используйте p:watermark, чтобы получить требуемую функциональность. Официальное демо ЗДЕСЬ

Ответ 6

Попробуйте это

<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 это работает правильно для меня.

Ответ 7

Использовать primeface 4.0. Версии ниже этой версии не поддерживают атрибут placeholder.

  • использовать пространство имен xmlns:pt="http://java.sun.com/jsf/passthrough".

  • p:inputTextarea id="textAreaValue" pt:placeholder="your text"

    не вставляйте новую строку в inputTextArea.

Ответ 8

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

Это работает для меня, попробуйте!

Ответ 9

Самый простой способ визуализации поля ввода с текстом-заполнителем - использовать тег элементарного ввода

Пример:

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

Примечание. вам не нужно включать какие-либо пространства имен