ドキュメントAEMAEM チュートリアルAEM Forms のチュートリアル

パスワードフィールドの表示を切り替え

Last update: Thu Oct 10 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

作成対象：

  • 初心者
  • 開発者

一般的なユースケースとしては、フォーム入力者が、「パスワード」フィールドに入力されたテキストの表示／非表示を切り替えることができます。
このユースケースを実現するために、Font Awesome ライブラリの目のアイコンを使用しました。このデモ用に作成されたクライアントライブラリには、必要な 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 を使用してパスワードフィールド内に​ 目 ​のアイコンを配置します

.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