勉強したことのメモ

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

  関連記事

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

jQueryで後から追加した要素にhasClass / addClass / removeClassを使用した際の挙動

jQueryで後から追加した要素にhasClass / addClass / r ...

jQuery UIを使って簡単にダイアログを表示させる方法

ブラウザ上でユーザーに対してちょっとした確認を行いたい場合はJavaScript ...

jQueryのプラグインで簡単にイメージスライダーを作成(bxslider)

画像のスライダーを作る時に便利なプラグインであるbxslider。簡単に使えるし ...

jQueryでformの各種パーツ(テキストボックス等)の操作まとめ

jQueryでフォームのセレクトメニューやラジオボタン等、各種パーツを操作するこ ...