切換密碼欄位可見性

常見的使用案例是允許表單填寫者切換為在密碼欄位中輸入文字的可見度。
為了完成此使用案例,我使用了以下檔案中的眼睛圖示: Font Awesome Library. 所需的CSS和eye.svg會包含在為此示範建立的使用者端資料庫中。

程式碼範例

最適化表單有一個欄位為PasswordBox型別,稱為 ssnField.

載入表單時會執行以下程式碼

$(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是用來放置 眼睛 圖示在密碼欄位內

.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