'Problems with the attribute "placeholder" of an <p:inputText tag when the value of the inputText is empty

I am using JSF Mojarra 2.3.9.SP02 with PrimeFaces 7.0 running on Wildfly 17 with the PrimeFaces's own Sapphire template.

I have a severe problem with one <p:inputText element in my form, for which I have specified a placeholder, and whose initial value is empty. This is the first input field just below the panel group with the title "Kontaktperson" as shown in the attachment

enter image description here

Below is my minimal working example:

=========== .xhtml file ==================

<!DOCTYPE html>

<h:head>
    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes" />
    </f:facet>
    <title>Hello</title>
    <h:outputScript name="js/nanoscroller.js" library="sapphire-layout" />
    <h:outputScript name="js/layout.js" library="sapphire-layout" />
    <h:outputScript name="js/ripple.js" library="sapphire-layout" />
</h:head>

<h:body>
    <style>
        .md-inputfield_marg_top{
            margin-top: 10px;
        }
    </style>          
                
  <div class="ui-g ui-fluid">   
        <div class="card card-w-title">
            <h:form id="resultsFormId">
                    
                        <div class="card-title">Firmendaten bearbeiten</div> 
                              <p:fieldset legend="Kontaktperson" toggleable="true" toggleSpeed="500">
                              <div class="ui-g-12 ui-md-2">
                                   <div class="ui-inputgroup">
                                      <span class="ui-inputgroup-addon">
                                          <i class="material-icons">account_circle</i>
                                      </span>
                                      <h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
                                          <p:inputText value="#{fdTestBean.titel}" placeholder="Mag."/>
                                          <label>Titel</label>
                                      </h:panelGroup>     
                                    </div>
                              </div>
                              <div class="ui-g-12 ui-md-2"/>
                              <div class="ui-g-12 ui-md-8">
                                   <div class="ui-inputgroup">
                                      <span class="ui-inputgroup-addon">
                                          <i class="material-icons">account_circle</i>
                                      </span>
                                      <h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
                                          <p:inputText value="#{fdTestBean.qualifikation}" />
                                          <label>Qualifikation</label>
                                      </h:panelGroup>     
                                    </div>
                              </div>
                              <div class="ui-g-12 ui-md-6">
                                   <div class="ui-inputgroup">
                                      <span class="ui-inputgroup-addon">
                                          <i class="material-icons">account_circle</i>
                                      </span>
                                      <h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
                                          <p:inputText value="#{fdTestBean.vorname}"/>
                                          <label>Vorname</label>
                                      </h:panelGroup>     
                                    </div>
                              </div>
                              <div class="ui-g-12 ui-md-6">
                                   <div class="ui-inputgroup">
                                      <span class="ui-inputgroup-addon">
                                          <i class="material-icons">account_circle</i>
                                      </span>
                                      <h:panelGroup styleClass="md-inputfield md-inputfield_marg_top">
                                          <p:inputText value="#{fdTestBean.nachname}"/>
                                          <label>Nachname</label>
                                      </h:panelGroup>     
                                    </div>
                              </div>
                          </p:fieldset>
           </h:form>
      </div>
   </div>
    
    <h:outputStylesheet name="css/nanoscroller.css" library="sapphire-layout" />
    <h:outputStylesheet name="css/ripple.css" library="sapphire-layout" />
    <h:outputStylesheet name="css/grid.css" library="sapphire-layout" />
    <h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="sapphire-layout" />
   </h:body>
</html>

And my backing bean here:

package at.home.digest.web.ave.makler.firma;

import java.io.Serializable;

import javax.inject.Named;

@Named("fdTestBean")
@javax.faces.view.ViewScoped
public class FDTestBean implements Serializable {

    private String titel;

    private String qualifikation;

    private String vorname;

    private String nachname;

    public String getTitel() {
        return titel;
    }

    public void setTitel(String titel) {
        this.titel = titel;
    }

    public String getQualifikation() {
        return qualifikation;
    }

    public void setQualifikation(String qualifikation) {
        this.qualifikation = qualifikation;
    }

    public String getVorname() {
        return vorname;
    }

    public void setVorname(String vorname) {
        this.vorname = vorname;
    }

    public String getNachname() {
        return nachname;
    }

    public void setNachname(String nachname) {
        this.nachname = nachname;
    }

}
htmlcssjsfprimefaces


Solution 1:[1]

Shouldnt't all those inputs only have a placeholder OR a value? It just posts them both if your value is set. Or you switch placeholders with your values.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Albert

Related Questions