TOC

PrimeFaces - Wasserzeichen bei der Texteingabe

In PrimeFaces können Sie mit <p: watermark> `den Wasserzeicheneffekt im Eingabefeld anzeigen. Diese Wasserzeichenkomponente verwendet das HTML5-Attribut "Platzhalter" in unterstützten Browsern wie Safari, Chrome und Firefox und greift auf die JavaScript-Lösung für nicht unterstützte Browser wie IE zurück.

Wasserzeichentext im Eingabefeld anzeigen 

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

In diesem Lernprogramm zeigen wir Ihnen, wie Sie die Wasserzeichenkomponente von PrimeFaces verwenden, um einen Wasserzeicheneffekt zu erstellen und auch die Textfarbe zu gestalten.

Benutztes Werkzeug :

  1. PrimeFaces 3.3

  2. JSF 2.2.11

  3. Eclipse 4.2

  4. Maven 3

  5. Tomcat 7

1. Wasserzeichenbeispiel

Fügen Sie " username ** " über dem Eingabetext hinzu (Wasserzeicheneffekt).

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 - Nichts tun 

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. Demo

http://localhost : 8080/primefaces/index.jsf

Beispiel für Primefaces-Wasserzeichen

Überprüfung fehlgeschlagen.

Beispielfehler für Primefaces-Wasserzeichen

3. Ändern Sie die Textfarbe

Eine häufige Anforderung besteht darin, den Standardtext für die graue Farbe zu ändern. Um es zu stylen, benötigen Sie CSS-Eigenschaften für Platzhalter für Anbieter-Präfixe:

…​./ 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; } 

Für IE, der keinen HTML5-Platzhalter unterstützt, fügt PrimeFaces ein zusätzliches .ui-Wasserzeichen hinzu.

Siehe Demo, die Textfarbe des Wasserzeichens wird in „blau“ geändert.

image://wp-content/uploads/2012/10/primefaces-watermark-style.png[primefaces Wasserzeichen-Textfarbe, title = "primefaces-waterermark-style", width = 592, height = 362]

__P.S getestet auf IE9, Chrome und Safari.__

===  Quellcode herunterladen

Download es - link://wp-content/uploads/2012/10/primefaces-watermark-example.zip[primefaces-watermark-example.zip](11 KB)

===  Referenzen

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

Wasserzeichen-Komponentenvitrine]. http://forum.primefaces.org/viewtopic.php?f=3

Textfarbe von <p: Wasserzeichen>]. http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css

HTML5-Platzhalterfarbe einer Eingabe mit CSS]. http://www.splashnology.com/article/html5-placeholder-stylization-with-the-help-of-css/gliches HTML5

Platzhalterstilisierung mit Hilfe von CSS]. http://css-tricks.com/snippets/css/style-placeholder-text/[Style

Platzhaltertext]

link://tag/primefaces/[primefaces]link://tag/wasserzeichen/[wasserzeichen]
Related