勉強したことのメモ

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にて何らかの処理中、ユーザーによるクリックや入力等の動作を防ぎたい。 ...

pjaxについてのメモ

ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...

AjaxのJSONP使用でPHPで作った配列をJSに返す方法

AというサイトからBというサイトにAjax通信し、Bの方ではMySQLに接続して ...

指定した要素に注釈を設定できる「Chardin.js」プラグインの利用方法

指定した要素に注釈を入れることができるjQueryプラグイン「Chardin.j ...

エリア→都道府県→路線→駅名を連携する絞り込みセレクトメニューの設置方法

エリア→都道府県→路線→駅名のドリルダウン検索をプルダウン形式で設置したい。以前 ...