formのpasswordとtextをjQueryで切り替える方法
2024/05/19
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
prop
関連記事
-
-
jQueryのトースト(通知)用ライブラリ「iziToast.js」の利用方法
システム構築の際、エラー表示をJavaScriptのアラートではなくトースト(通 ...
-
-
jQueryのloadメソッドでファイル(ページ)を呼び出す
サイト内でヘッダーやフッター等共通のパーツはそれぞれ別ファイルに分けてPHPのi ...
-
-
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...
-
-
AjaxFileUploadで処理は実行できてもエラーが返る
AjaxFileUploadでPHPに通信し、サーバー側のPHPで処理は正常に実 ...
-
-
jQueryでshow/hideよりaddClass/removeClassの方が速い
diaplay:none/blockする際に最近はshow()/hide()を ...