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 UIのDatepickerでリセット(入力内容消去)ボタンの追加方法
jQuery UIのDatepickerでキーボード入力を防ぎたいためreado ...
-
-
JavaScriptで数値のカウントアップ及びカウントダウン
JavaScript(一部jQuery)で数値のカウントアップ及びカウントダウン ...
-
-
jQselectableでセレクトボックスをリッチにする
入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...
-
-
JavaScript / jQueryでブラウザのウィンドウがアクティブかどうかを判別する方法
ある動画サイトを閲覧していた際にウィンドウが非アクティブになると視聴中の動画が止 ...
-
-
セレクトメニュー(プルダウン)をdisplay:none;指定してもiPhoneのみ非表示にならない問題の対応方法
セレクトメニュー(プルダウン)に対してdisplay:none;指定したりjQu ...