TOC

PrimeFaces - Водяной знак при вводе текста

В PrimeFaces вы можете использовать <p: watermark> для отображения эффекта водяного знака в поле ввода. Этот компонент водяного знака использует атрибут HTML5 placeholder в поддерживаемых браузерах, таких как Safari, Chrome и Firefox, и использует решение JavaScript для не поддерживающего браузер, такого как IE.

Отображение текста водяного знака в поле ввода 

  <p:inputText id="username" required="true"
    label="username" size="40" value="#{userBean.username}"/>
  <p:watermark for="username" value="Username ** "/>

В этом уроке мы покажем вам, как использовать компонент водяного знака PrimeFaces для создания эффекта водяного знака, а также стилизации цвета текста.

Используемые инструменты:

, PrimeFaces 3.3

, JSF 2.2.11

, Затмение 4.2

, Maven 3

, Tomcat 7

1. Пример водяного знака

Добавьте текст « username ** » поверх вводимого текста (эффект водяного знака).

index.xhtml 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>

</h:head>
<h:body>
    <f:facet name="last">
        <h:outputStylesheet library="mytheme" name="css/style.css"/>
    </f:facet>

    <h1>PrimeFaces watermark example</h1>

    <div style="width: 500px">
     <h:form>
        <p:inputText id="username" required="true" label="username" size="40"
        requiredMessage="Please enter your username."
        value="#{userBean.username}">
            <f:validateLength minimum="3" maximum="20"/>
        </p:inputText>
        <p:watermark for="username" value="Username ** "/>

        <p:message for="username"/>

        <p:commandButton value="test" style="margin:20px"
        action="#{userBean.register}" ajax="false"/>

      </h:form>
    </div>

</h:body>
</html>

UserBean.java - ничего не делать 

package com.mkyong;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name = "userBean")
@SessionScoped
public class UserBean {

    String username;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String register(){
        return "thanks";
    }

}

2. Демо

http://локальный : 8080/primefaces/index.jsf

пример водяного знака primefaces

Проверка не удалась.

пример ошибки водяного знака primefaces

3. Изменить цвет текста

Общий запрос - изменить текст серого цвета по умолчанию. Для стилизации вам понадобятся CSS-свойства местозаполнителя префикса поставщика:

…​./ chorme and safari /::-webkit-input-placeholder { color: blue !important; font-weight: normal !important; } / firefox /:-moz-placeholder { color: blue !important; font-weight: normal !important; } / IE /.ui-watermark { color: blue !important; font-weight: normal !important; } 

Для IE, не поддерживающего HTML5-заполнитель, PrimeFaces добавит дополнительный `.ui-watermark`.

См. Демонстрацию, цвет текста водяного знака изменен на «синий».

image://wp-content/uploads/2012/10/primefaces-watermark-style.png[основной цвет текста водяного знака, title = "primefaces-watermark-style", ширина = 592, высота = 362]

__P.S протестировано на IE9, Chrome и Safari.__

===  Скачать исходный код

Загрузите его - ссылка://wp-content/uploads/2012/10/primefaces-watermark-example.zip[primefaces-watermark-example.zip](11 КБ)

===  Рекомендации

, http://www.primefaces.org/showcase/ui/watermark.jsf[PrimeFaces

витрина компонента водяного знака], http://forum.primefaces.org/viewtopic.php?f=3

цвет текста <p: водяной знак>], http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css[Change

цвет заполнителя HTML5 для ввода с помощью CSS], http://www.splashnology.com/article/html5-placeholder-stylization-with-the-help-of-css/[HTML5

Стилизация заполнителя с помощью CSS], http://css-tricks.com/snippets/css/style-placeholder-text/[Style

Текст заполнителя]

ссылка://тег/основные лица/[основные лица]ссылка://тег/водяные знаки/[водяные знаки]
Related