在此页面中，我将通过单击复选框让用户显示密码。实际上应该隐藏两个输入（password，conPassword），并显示另一个输入（passwordV）。所有这三个输入具有相同的值，并且需要将它们的值保持为用户在这两种状态之间切换:(具有两个可见的秘密字段或具有一个纯文本字段）
我把页面和bean代码放在这里：
JSF页面：
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
template="./templates/main_template.xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns="http://www.w3.org/1999/xhtml">
<ui:define name="subTitle">
:: #{lbls.newEntry} </ui:define>
<ui:define name="content">
<p:panel rendered="#{current.loggedIn}" header="#{lbls.newEntry}" >
<h:form id="frmEntry">
<h:panelGrid columns="3">
<h:panelGroup>
<h:outputLabel for="title" value="#{lbls.title}:"/>
<p:focus for="title"/>
</h:panelGroup>
<p:inputText id="title" value="#{entry.passwordEntry.title}" maxlength="100" label="#{lbls.title}" required="true"/>
<p:message for="title"/>
<h:outputLabel for="description" value="#{lbls.description}:"/>
<p:inputTextarea id="description" value="#{entry.passwordEntry.description}" maxlength="500" rows="3" cols="40" label="#{lbls.description}"/>
<p:message for="description"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<h:outputLabel for="username" value="#{lbls.username}:"/>
<p:inputText id="username" value="#{entry.passwordEntry.username}" maxlength="100" label="#{lbls.username}"/>
<p:message for="username"/>
<h:outputLabel for="password" id="lblPassword" value="#{lbls.password}:" styleClass="#{entry.showPasswords ? 'none' : ''}" />
<p:password id="password" feedback="true" value="#{entry.passwordEntry.password}" match="conPassword" maxlength="100"
label="#{lbls.password}" promptLabel="#{lbls.strengthPromp}" weakLabel="#{lbls.weakPassword}"
goodLabel="#{lbls.goodPassword}" strongLabel="#{lbls.strongPassword}" styleClass="#{entry.showPasswords ? 'none' : ''}"
/>
<p:message id="msgPassword" for="password" class="#{entry.showPasswords ? 'none' : ''}"/>
<h:outputLabel id="lblConPassword" for="conPassword" value="#{lbls.conPassword}:"
styleClass="#{entry.showPasswords ? 'none' : ''}"/>
<p:password id="conPassword" value="#{entry.passwordEntry.password}" label="#{lbls.conPassword}" maxlength="100"
styleClass="#{entry.showPasswords ? 'none' : ''}"/>
<p:message id="msgConPassword" for="conPassword" class="display: #{!entry.showPasswords ? 'none' : ''}"/>
<h:outputLabel id="lblPasswordV" for="passwordV" value="#{lbls.password}:"
styleClass="#{!entry.showPasswords ? 'none' : ''}"/>
<p:inputText id="passwordV" value="#{entry.passwordEntry.password}" maxlength="100"
label="#{lbls.password}"
styleClass="#{!entry.showPasswords ? 'none' : ''}"/>
<p:message id="msgPasswordV" for="passwordV"
class="#{!entry.showPasswords ? 'none' : ''}"/>
<h:outputLabel for="showPasswords" value="#{lbls.showPasswords}:"/>
<p:selectBooleanCheckbox id="showPasswords" label="#{lbls.showPasswords}" value="#{entry.showPasswords}">
<p:ajax process="password passwordV conPassword" update="password passwordV conPassword lblPassword lblPasswordV lblConPassword msgPassword msgConPassword msgPasswordV"/>
</p:selectBooleanCheckbox>
<h:outputText/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<h:outputLabel for="url" value="#{lbls.url}:"/>
<p:inputText id="url" value="#{entry.passwordEntry.url}" maxlength="255" label="#{lbls.url}"/>
<p:message for="url"/>
<h:outputLabel for="ip" value="#{lbls.ip}:"/>
<p:inputText id="ip" value="#{entry.passwordEntry.ip}" maxlength="255" label="#{lbls.ip}"/>
<p:message for="ip"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<h:outputLabel for="tags" value="#{lbls.tags}:"/>
<p:autoComplete id="tags" value="#{entry.selectedTags}"
completeMethod="#{entry.selectTag}" converter="PasswordEntry" multiple="true"
var="tag" itemLabel="#{tag.title}" itemValue="#{tag}" />
<p:message for="tags"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<p:spacer height="10"/>
<h:outputText/>
<h:panelGroup layout="block" styleClass="right-align">
<p:commandButton value="#{lbls.save}" actionListener="#{entry.save(event)}"
update=":growl messages"/>
</h:panelGroup>
<f:facet name="footer">
<p:messages id="messages"/>
</f:facet>
</h:panelGrid>
</h:form>
</p:panel>
<ui:include src="/templates/not_logged_in.xhtml" rendered="!#{current.loggedIn}"/> </ui:define>
</ui:composition>
和Bean：
package package;
@ManagedBean(name = "entry")
@ViewScoped
public class PasswordEntryBean implements Serializable {
//<editor-fold defaultstate="collapsed" desc="FIELDS">
private static final Logger logger = LogUtil.getLogger(PasswordEntryBean.class);
private PasswordEntry passwordEntry;
@ManagedProperty(value = "#{current}")
private CurrentSessionBean current;
private Database database;
private List<PasswordTag> selectedTags = new ArrayList<PasswordTag>();
private Set<PasswordTag> tags;
private boolean showPasswords;
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="CONSTRUCTORS">
public PasswordEntryBean() {
passwordEntry = new PasswordEntry();
}
@PostConstruct
public void init() {
}
//</editor-fold>
//<editor-fold defaultstate="collapsed" desc="PROPERTIES">
public PasswordEntry getPasswordEntry() {
return passwordEntry;
}
public Database getDatabase() {
return database;
}
public boolean getShowPasswords() {
return showPasswords;
}
public void setShowPasswords(boolean showPasswords) {
this.showPasswords = showPasswords;
}
public void setDatabase(Database database) {
this.database = database;
}
public Set<PasswordTag> getTags() {
return tags;
}
public void setTags(Set<PasswordTag> tags) {
this.tags = tags;
}
public List<PasswordTag> getSelectedTags() {
return selectedTags;
}
public void setSelectedTags(List<PasswordTag> selectedTags) {
this.selectedTags = selectedTags;
}
public void setPasswordEntry(PasswordEntry passwordEntry) {
this.passwordEntry = passwordEntry;
}
public CurrentSessionBean getCurrent() {
return current;
}
public void setCurrent(CurrentSessionBean current) {
this.current = current;
}
//</editor-fold>
}
更新代码
我刚写了一个更简单的代码，以便您更容易理解我的问题：
JSF：
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.none {
display: none;
}
</style>
</h:head>
<h:body>
<h1>Register</h1>
<h:form id="frmRegistration">
<h:panelGrid columns="3">
<h:outputLabel value="Username:" for="username"/>
<p:inputText label="username" id="username" value="#{testBean.username}" required="true"/>
<p:message for="username"/>
<h:outputLabel value="Password:" id="lblPassword" for="password" styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
<p:password label="password" id="password" value="#{testBean.password}"
styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
<p:message for="password" id="msgPassword" class="#{!testBean.visiblePassword ? '' : 'none'}"/>
<h:outputLabel value="Confirm Password:" id="lblCpassword" for="cpassword" styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
<p:password label="confirm password" id="cpassword" value="#{testBean.password}"
styleClass="#{!testBean.visiblePassword ? '' : 'none'}"/>
<p:message for="cpassword" id="msgCpassword" class="#{!testBean.visiblePassword ? '' : 'none'}"/>
<h:outputLabel value="Password:" id="lblVpassword" for="vpassword" styleClass="#{testBean.visiblePassword ? '' : 'none'}"/>
<p:inputText label="password" id="vpassword" value="#{testBean.password}"
styleClass="#{testBean.visiblePassword ? '' : 'none'}"/>
<p:message for="vpassword" id="msgVpassword" class="#{testBean.visiblePassword ? '' : 'none'}"/>
<h:outputLabel value="Show password"/>
<p:selectBooleanButton value="#{testBean.visiblePassword}"
onLabel="Yes" offLabel="No">
<p:ajax update="messages password cpassword vpassword lblPassword lblCpassword lblVpassword msgPassword msgCpassword msgVpassword"
process="messages password cpassword vpassword" listener="#{testBean.addMessage}" />
</p:selectBooleanButton>
<f:facet name="footer">
<p:commandButton actionListener="#{testBean.save(event)}" value="Save" update="messages"/>
<p:messages id="messages"/>
</f:facet>
</h:panelGrid>
</h:form>
</h:body>
</html>
AND BEAN：
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;
@ManagedBean
@ViewScoped
public class TestBean {
private String username;
private String password;
private boolean visiblePassword;
public void addMessage() {
String summary = visiblePassword ? "Checked" : "Unchecked";
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(summary));
}
public TestBean() {
}
public void save(ActionEvent event) {
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public boolean isVisiblePassword() {
return visiblePassword;
}
public void setVisiblePassword(boolean visiblePassword) {
this.visiblePassword = visiblePassword;
}
}
如果我没有将进程属性添加到<p:ajax标记，此代码可以隐藏两个字段并正确显示第三个字段。但是当用户在两种模式（2个秘密字段/ 1个纯文本字段）之间切换时，需要此属性才能使这些字段保持其值
但它失败了！
=============================================== ===========
第二次更新
我使用了重新显示并解决了空值的问题，但输入仍然没有隐藏/显示，除非我将update和process设置为@form这对我不利情况下。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
<style type="text/css">
.none {
display: none;
}
</style>
</h:head>
<h:body>
<h1>Register</h1>
<h:form id="frmRegistration">
<h:panelGrid columns="3">
<h:outputLabel value="Username:" for="username"/>
<p:inputText label="username" id="username" value="#{testBean.username}" required="true"/>
<p:message for="username"/>
<h:outputLabel value="Password:" id="lblPassword" for="password" rendered="#{!testBean.visiblePassword}"/>
<p:password redisplay="true" label="password" id="password" value="#{testBean.password}"
rendered="#{!testBean.visiblePassword}"/>
<p:message for="password" id="msgPassword" rendered="#{!testBean.visiblePassword}"/>
<h:outputLabel value="Confirm Password:" id="lblCpassword" for="cpassword" rendered="#{!testBean.visiblePassword}"/>
<p:password redisplay="true" label="confirm password" id="cpassword" value="#{testBean.password}"
rendered="#{!testBean.visiblePassword}"/>
<p:message for="cpassword" id="msgCpassword" rendered="#{!testBean.visiblePassword}"/>
<h:outputLabel value="Password:" id="lblVpassword" for="vpassword" rendered="#{testBean.visiblePassword}"/>
<p:inputText label="password" id="vpassword" value="#{testBean.password}"
rendered="#{testBean.visiblePassword}"/>
<p:message for="vpassword" id="msgVpassword" rendered="#{testBean.visiblePassword}"/>
<h:outputLabel value="Show password"/>
<p:selectBooleanButton value="#{testBean.visiblePassword}"
onLabel="Yes" offLabel="No">
<p:ajax update="messages password cpassword vpassword lblPassword lblCpassword lblVpassword msgPassword msgCpassword msgVpassword"
process="password cpassword vpassword" listener="#{testBean.addMessage}" />
</p:selectBooleanButton>
<f:facet name="footer">
<p:commandButton actionListener="#{testBean.save(event)}" value="Save" update="messages"/>
<p:messages id="messages"/>
</f:facet>
</h:panelGrid>
</h:form>
</h:body>
</html>
答案 0 :(得分：1)
问题是您将相同的变量entry.passwordEntry.password绑定到2个或更多字段，因此在提交<h:form>时，这些字段中只有一个值将设置为{{1} }，其他值将被丢弃。
解决此问题的最佳方法是为表单上您/需要的每个字段设置不同的变量。通过查看代码，看起来可以通过在bean中拥有3个entry.passwordEntry.password属性来实现：
PasswordEntryJSF代码：
@ManagedBean(name = "entry")
@ViewScoped
public class PasswordEntryBean implements Serializable {
//other attributes...
private PasswordEntry passwordEntry;
private PasswordEntry passwordEntryV;
private PasswordEntry conPasswordEntry;
//<editor-fold defaultstate="collapsed" desc="CONSTRUCTORS">
public PasswordEntryBean() {
passwordEntry = new PasswordEntry();
passwordEntryV = new PasswordEntry();
conPasswordEntry = new PasswordEntry();
}
//getters and setters...
}
如果你想/需要在2或3个地方拥有相同的值，你必须考虑到绑定不应该在同一个<p:password id="password" feedback="true" value="#{entry.passwordEntry.password}"
match="conPassword" maxlength="100" label="#{lbls.password}"
promptLabel="#{lbls.strengthPromp}" weakLabel="#{lbls.weakPassword}"
goodLabel="#{lbls.goodPassword}" strongLabel="#{lbls.strongPassword}"
styleClass="#{entry.showPasswords ? 'none' : ''}" />
<p:password id="conPassword" value="#{entry.conPasswordEntry.password}"
label="#{lbls.conPassword}" maxlength="100"
styleClass="#{entry.showPasswords ? 'none' : ''}"/>
<p:inputText id="passwordV" value="#{entry.passwordEntryV.password}"
maxlength="100" label="#{lbls.password}"
styleClass="#{!entry.showPasswords ? 'none' : ''}"/>
，否则你会遇到同样的问题。您可以使用纯JavaScript 同步变量值（毕竟，<h:form>将是<p:password>而<input type="password">将是<p:input>）或者执行动作时的服务器端，即在<input type="text">中选择值时应执行的侦听器。
答案 1 :(得分：1)
您的主要错误是您在客户端使用CSS切换输入字段的可见性，而不是在服务器端使用JSF。所以JSF基本上不知道哪一个被显示/隐藏。它只知道两个字段都显示出来。所以它将处理这两个领域。由于您已将两个字段的值绑定到同一个属性，因此它总是会获得上一个已处理字段的值。
您需要在服务器端使用JSF显示/隐藏输入字段。您可以使用其提供的rendered属性。
rendered="#{testBean.visiblePassword}"