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

Не должна ли эта строка кода отображать поле inputtext с текстом-заполнителем "fill me" при использовании html5? 

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

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

9 34
jsf placeholder

9 ответов:

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

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

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

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

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

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

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

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

  3. Реализуйте пользовательский компонент, который использует вышеупомянутый пользовательский визуализатор.

  4. Реализуйте решение на основе JS, в котором вы берете элемент из DOM и явно устанавливаете атрибут.

  5. Ищите библиотеку компонентов, которая поддерживает это из коробки. PrimeFaces например имеет <p:watermark> для этого с помощью nice JS основана изящная деградация для браузеров, которая не поддерживает атрибут placeholder на входах.

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

См. также:

59

Вы можете достичь этого либо с помощью атрибута placeholder, либо с помощью атрибута p:watermark, Если используете Primefaces и JSF 2.0+, либо, если доступен JSF 2.2, вы можете использовать атрибут pt:placeholder.

Примитивы 

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

Проверьте этот ответ.

20

С помощью 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>
9

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

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

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

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

2

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

1

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

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

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

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

0

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

Пример: 

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

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

0

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

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

-1