切換密碼欄位可見性

常見的使用案例是允許填入表單切換至密碼欄位中輸入文字的可見性。
為了完成此使用案例，我已使用 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;
}

部署切換密碼示例

• 下載 用戶庫
• 下載 範例表單
• 使用匯入用戶端程式庫 套件管理器UI
• 使用匯入範例表單 Forms與檔案
• 預覽表單

Business.Adobe.com資源