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で同サーバ内のCSVを読み込み、配列やオブジェクトとして取り扱う方法
先日バニラJavaScriptで同サーバ内のCSVを読み込み、配列として取り扱う ...
-
-
NicEdit(WYSIWYGエディタ)とテキストエリアの切り替え
チェックボックスのON / OFFでNicEdit(WYSIWYGエディタ)とt ...
-
-
SortableJSを使ってデータの並べ替え&保存
あるシステムを拝見した際にtableタグ内に並んでいる項目をドラッグ&ド ...
-
-
JSやjQueryで動的に追加した要素に対して「slick」でスライダーを実行する方法
外部サーバからAjax等で画像URLを取得したものをimgタグとしてページ内に描 ...
-
-
DateTimePickerで特定日にClassを付与&選択不可にする方法
jQueryプラグインのDateTimePikerで特定の日にClassを付与し ...