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
関連記事
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
CAPTCHAに代わる無料のツール「Cloudflare Turnstile」の導入方法
CAPTCHAと言えばGoogleのreCAPTCHAを思い浮かべるが、稀にCl ...
-
-
jQueryプラグインでクリップボードにコピーする方法(clipboard.js)
ページ上のボタンをクリックすることで特定の文章をクリップボードにコピーしたかった ...
-
-
「input type="number"」のテキストボックスを桁数制限且つ半角数値のみ入力可にする方法
「input type="number"」のテキストボックスに対して「2桁まで」 ...
-
-
jQueryで画像が存在すれば表示、なければノーイメージ画像を表示
やりたかった事は以下の通り。 ・画像のURLはcode.jpgみたいになってる ...