ボタンを押してパスワードを一時的に表示させる方法(表示/非表示切り替え)【Javascript/jQuery】 - IT技術総合Wiki | CWiki

ページの作成

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例：親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例：親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう！

テンプレートを更新

テンプレート

パスワードを一時的に表示させる方法

◀ 13. ボタンを押してパスワードを一時的に表示させる方法(表示/非表示切り替え)【Javascript/jQuery】

やりたいこと

通常、パスワード入力欄は「●●●●●」と表示されるが、上記のように目のアイコンを押すことでパスワードを可視化したい。

実装

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="//cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">

<input id="password" type="password">
<span class="field-icon">
<i toggle="password-field" class="mdi mdi-eye toggle-password"></i>
</span>

<script>
$(".toggle-password").click(function () {
$(this).toggleClass("mdi-eye mdi-eye-off");

var input = $(this).parent().prev("input");
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});</script>

※CSSは別途必要

子ページ

子ページはありません

同階層のページ

HTML/CSS操作・制御

要素の取得

値と要素の追加

値と要素の削除

子要素の削除

要素のコピー

項目をタッチ/クリックしてスライドさせる方法

テキスト/セレクトボックス/ラジオボタン変更時のイベント

パスワードを一時的に表示させる方法

ページの詳細情報

過去バージョン

人気ページ

最近更新/作成されたページ

【Spring】独自のエラーページを定義する方法 NEW! (2020-04-09 16:31:58)
Whitelabel Error Page This application has no explicit mapping for /error, so you are seeing this as a fallback. (2019-11-01 14:51:48)
Spring SecurityのBasic認証の無効化 NEW! (2020-04-09 16:14:40)
【C++】文字列のデータ型の違いとまとめ NEW! (2020-04-07 21:34:50)
【C++】データ型一覧 NEW! (2020-04-03 11:02:01)
【C++】関数の定義と呼び出す方法 NEW! (2020-04-07 11:07:21)
C++ NEW! (2020-03-31 22:52:56)
LaravelのSelect文 (2018-05-03 17:22:15)
【C++】多次元配列の要素数の取得 NEW! (2020-04-05 15:15:26)
【C++】配列の要素数を取得する方法 NEW! (2020-04-05 15:10:46)

最近コメントのあったページ

同期処理 (2020-04-10 03:09:42)
Django administrationのユーザー作成方法 (2020-04-10 03:09:42)
ANACONDA NAVIGATORの起動方法 (2020-04-10 03:09:39)
ブラウザゲームの公開 (2020-04-10 03:09:32)
型 org.apache.tomcat.InstanceManager を解決できません。必要な .class ファイルから間接的に参照されています (2020-04-10 03:09:19)
【PHPエラー】XMLWriter::openUri(): Unable to resolve file path (2020-04-10 03:09:02)
本番サーバーへのデプロイ方法 (2020-04-10 03:06:35)
エラー一覧 (2020-04-10 03:06:07)
【Java】先頭と末端の文字の削除 (2020-04-10 03:06:04)
飛行機の加速と減速 (2020-04-10 03:04:49)

最近の質問

質問です (2020-02-20 12:19:36)
フリーランスの単価って高いですか？ (2020-02-12 19:56:16)
情報系のaoを受けるつもりなんですが何かおすすめのソフトはありますか？ (2020-02-12 19:54:22)
test3 (2020-02-08 23:50:54)
セレクトボックスのCSSのcontentで三角の部分が押せない (2019-07-03 13:06:10)
GCPのwp-config.phpでpermission denied (2019-06-05 20:04:08)
Spring FrameworkのEntityのカラム名の大文字小文字、アンスコについて (2019-02-01 07:13:49)
PHP(Laravel)からPythonのプログラムを呼び出したいのですがどうすればよいでしょうか。 (2018-12-06 06:26:57)
djangoを本番環境にデプロイしたいのですがどのレンタルサーバー or VPSサーバーがよいですか (2018-12-01 12:04:18)
Django administrationのUsernameとPasswordについて (2018-11-30 11:55:20)
Google Adsenseでアダルトコンテンツと誤認されてしまいました。 (2018-09-09 17:15:36)
Google MapsをUnityで使用する方法&料金 (2018-08-28 02:37:26)
Amazon PA-APIのSort=salesrankが効かない (2018-07-21 08:54:25)
楽観ロックと悲観ロックの違い (2018-01-11 05:05:33)
レンタルサーバーって沢山ありますけどどこがいいでしょうか？AWSってどうなんですか？ (2018-01-09 10:03:20)
ディープラーニングのライブラリってどれがオススメですか？ (2018-01-06 05:15:40)
Webスクレイピングってどこまでが違法なんでしょうか？ (2018-01-06 05:09:08)
人工知能(AI)、機械学習、ディープラーニングの違い (2018-01-06 02:40:44)

コメント一覧

No.6 | guest | 2020-04-10 02:43:10

No.5 | guest | 2020-04-09 23:25:28

No.4 | guest | 2020-04-09 08:22:25

No.3 | guest | 2020-04-09 06:36:08

No.2 | guest | 2020-04-05 21:43:14

No.1 | guest | 2020-03-28 07:03:39

コメントを削除してもよろしいでしょうか？

トップ

全ページ

掲示板

質問

ページ一覧

掲示板