勉強したことのメモ

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プラグイン(piCEdit)を用いてWebカメラの映像を撮影させる方法

form内の画像アップロード部分にて、通常であれば画像ファイルを参照させたものを ...

CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法

CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...

IE11でフォーム送信時に二重登録される

Internet Explorer11でform送信時にデータが二重登録されると ...

jQueryで同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法

先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...

CodeIgniter4&Bootstrap&jQueryで簡易版お問い合わせページの作成

CodeIgniter4.4.4&Bootstrap&jQuer ...