勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

formのpasswordとtextをjQueryで切り替える方法

   2024/05/19  jQuery JavaScript

formでtype="password"を指定していると内容を入力した際に「●●●」という形で表示される。こちらを別途設置したチェックボックスにチェックを入れることで、パスワードの内容を表示させたい。つまりtypeを「password」から「text」に変更したい。以下に対応方法をメモ。

 

サンプル

https://taitan916.info/sample/passmie/

パスワードを入力後「確認する」にチェックを入れるとパスワードが表示される筈。

 

ソースコード

<form>
    パスワード:<input id="password" name="password" type="password">
</form>
<input id="check" name="check" type="checkbox"> 確認する

<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(function(){
    $(`#check`).on(`change`,function(){

        //チェックボックスのチェック状況でtypeを分岐
        const type = ( $(this).prop('checked') ) ? `text` : `password`;

        //パスワード入力欄のtype属性を変更
        $('#password').attr('type', type);

    });
});
</script>

 

リファレンス

attr

https://api.jquery.com/attr/

prop

https://api.jquery.com/prop/

 - jQuery JavaScript

  関連記事

jQueryにて何らかの処理中にブラウザをロックする「waitMe」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

jQueryプラグインの作成

面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...

jQueryでHTMLの特定要素をループ時に逆順で処理する方法

jQueryでリスト(li)タグ等の特定要素をeach()でループ処理する場合、 ...

jQueryにて何らかの処理中にブラウザをロックする「Block UI」プラグインの利用方法

jQueryにて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたかっ ...

jQueryのanimate()でページスクロール後に他の処理を実行させる方法

jQueryのanimate()でページスクロール後に特定の要素を非表示にしたい ...