结合primefaces p：键盘和p：密码组件

Question

我在这里有一个问题，我想结合p:password和p:keyboard组件在primefaces，我想要的密码选项，如力量，在与password="true"键盘上，所以我可以得到力度计，验证，匹配，..等什么特别的p：键盘上的密码password='true'或反之，加入键盘p:password。

我觉得比较容易将键盘添加到密码字段，例如验证密码时自动清除值或在键盘保存时重新输入表格！

任何想法如何做到这一点，或解决方法，使之呢？

在另一个词来形容方程的解决方案：

<p:keyboard id="pwdPassword" value="#{loginManagedBean.password}" password="true" required="true" requiredMessage="Please enter your password"/> 

而且

<p:password id="pwd1" name="pwd1" value="#{loginManagedBean.newpassword}" match="pwd2" feedback="true" required="true" requiredMessage="Please Enter your new password"> 
      <f:validateLength minimum="6" /> 
     </p:password> 

=？

Answer 1

有一种解决方法，您可能会感兴趣。

策略是同步键盘和密码组件之间的值并隐藏其中一个输入值。

如果您检查窗帘背后发生了什么（here和here），您将能够看到一些可能性。

我想到的第一个问题是隐藏来自主密码组件的输入并编写一些JavaScript代码，以便根据需要显示和消失。

这里是我创建为了验证这一想法的情景：

<h:form id="mainForm"> 
    <h:panelGrid columns="2" id="matchGrid" cellpadding="5">     
     <h:outputLabel for="pwd1" value="Password 1: *" /> 
     <h:panelGroup> 
      <p:keyboard id="pwdPassword" widgetVar="kVar" value="#{viewMBean.password}" password="true" required="true" requiredMessage="Please enter your password"/> 
      <p:password id="pwd1" widgetVar="pVar" value="#{viewMBean.password2}" match="pwd2" label="Password 1" required="true" feedback="true" /> 
     </h:panelGroup> 

     <h:outputLabel for="pwd2" value="Password 2: *" /> 
     <p:password id="pwd2" value="#{viewMBean.password2}" label="Password 2" required="true" /> 
    </h:panelGrid> 
</h:form> 

这里是JavaScript：

function updateStrength() { 

    var p = PF('pVar'); 
    var k = PF('kVar'); 

    p.jq.val(k.jq.val()); 

    var value = p.jq.val(), 
      label = null, 
      meterPos = null; 

    if (value.length === 0) { 
     label = p.cfg.promptLabel; 
     meterPos = '0px 0px'; 
    } else { 
     var score = p.testStrength(p.jq.val()); 

     if (score < 30) { 
      label = p.cfg.weakLabel; 
      meterPos = '0px -10px'; 
     } 
     else if (score >= 30 && score < 80) { 
      label = p.cfg.goodLabel; 
      meterPos = '0px -20px'; 
     } 
     else if (score >= 80) { 
      label = p.cfg.strongLabel; 
      meterPos = '0px -30px'; 
     } 
    } 

    //update meter and info text 
    p.meter.css('background-position', meterPos); 
    p.infoText.text(label); 

} 

$(document).ready(function() { 
    var p = PF('pVar'); 
    //p.jq.hide(); 

    var k = PF('kVar'); 
    k.jq.focus(function() { 
     p.show(); 
    }).blur(function() { 
     if (!$.keypad._keypadShowing) { 
      p.hide(); 
     } 
    }).keyup(updateStrength); 

    PrimeFaces.widget.Password.prototype.show = function() { 

     $(".keypad-close").click(function() { 
      console.log("close p"); 
      p.hide(); 
     }); 

     $(".keypad-key").click(updateStrength); 

     //align panel before showing 
     if (!this.cfg.inline) { 
      this.panel.css({ 
       left: '', 
       top: '', 
       'z-index': ++PrimeFaces.zindex 
      }) 
        .position({ 
         my: 'left top', 
         at: 'right top', 
         of: k.jq 
        }); 

      this.panel.fadeIn(); 
     } 
     else { 
      this.panel.slideDown(); 
     } 
    }; 

}); 

我希望会给你更多的“弹药”，以应对你的挑战。