切换密码字段可见性

一个常见用例是允许表单填充器切换到显示在密码字段中输入的文本。
为完成此用例,我使用了Font Awesome Library中的眼睛图标。 所需的CSS和eye.svg包含在为此演示创建的客户端库中。

示例代码

自适应表单具有名为​ ssnField ​的PasswordBox类型字段。

加载表单时执行以下代码

$(document).ready(function() {
    $(".ssnField").append("<p id='fisheye' style='color: Dodgerblue';><i class='fa fa-eye'></i></p>");

    $(document).on('click', 'p', function() {
        var type = $(".ssnField").find("input").attr("type");

        if (type == "text") {
            $(".ssnField").find("input").attr("type", "password");
        }

        if (type == "password") {
            $(".ssnField").find("input").attr("type", "text");
        }

    });

});

以下CSS用于在密码字段中定位​ eye ​图标

.svg-inline--fa {
    /* display: inline-block; */
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
    position: absolute;
    top: 45px;
    right: 40px;
}

部署切换密码示例

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e