Как добавить атрибут-заполнитель во входной компонент JSF? - PullRequest
Новая
       14

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

39 голосов
/ 13 декабря 2011

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

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

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

Ответы [ 9 ]

67 голосов
/ 13 декабря 2011

Я думал, что все, что не было 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 для PrimeFaces.

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

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

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

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

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

См. Также:

21 голосов
/ 15 августа 2013

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

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

9 голосов
/ 30 июля 2013

С помощью 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>
7 голосов
/ 02 января 2014

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

<h:inputText id="myInput">
    <rich:placeholder value="My placeholder text"></rich:placeholder>
</h:inputText>
2 голосов
/ 03 июня 2016

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

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

1 голос
/ 19 марта 2015

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

0 голосов
/ 06 мая 2016

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

Пример: 

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

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

0 голосов
/ 24 апреля 2016 

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

Мне это подходит, попробуйте!

0 голосов
/ 29 октября 2014

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

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

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

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

...