勉強したことのメモ

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

  関連記事

NicEdit(WYSIWYGエディタ)を再描写時にサイズを調整する方法

NicEdit(WYSIWYGエディタ)を設置しているサイトがあった。ページ読み ...

さくらのレンタルサーバでCookieが正常に保存できない場合の対応方法

さくらインターネットのレンタルサーバでjquery.cookie.jsを用いてC ...

jQuery UIを用いた日付及び時間のピッカーの利用方法

jQuery UIを用いた日付及び時間のピッカーを実装したい。以下にソースコード ...

FullCalendarでラベルごとに表示・非表示を切り替える方法

Googleカレンダーだとページ左側にマイカレンダーというのがあり、その中に任意 ...

YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法

以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...