切換密碼欄位可見性

常見的使用案例是允許表單填寫者切換為在密碼欄位中輸入文字的可見度。
為了完成此使用案例,我使用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