Question

我在这里有一个问题，我希望在primefaces中组合p:password和p:keyboard组件，我想要password="true"键盘上的密码选项，如力量，所以我可以得到力量计，验证，匹配，...等对于password='true'键盘上的p：密码有什么特别之处，反之亦然，将键盘添加到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();
        }
    };

});

我希望能给你更多的东西＆＃34; ammo＆＃34;处理你的挑战。

组合primefaces p：keyboard和p：password components

1 个答案: