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のカラーピッカープラグイン「excolor」の利用方法
以前の記事でカラーピッカープラグインのことを書いたけどスマホでは使えない。なので ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
pjaxについてのメモ
ずっと気になっていたpjaxについてのメモ。 ■参考サイト http://chi ...
-
-
Lightboxで画像拡大時に閉じるボタンの位置を右上に変更
Lightbox(バージョン2.7.1)で画像拡大時に閉じるボタンの位置を右下か ...
-
-
「jQuery.browser is undefined」エラーの対応方法
jQueryのプラグインを使っていて1.9以降だと「jQuery.browser ...