パスワードを表示する機能の実装
よく、インターネット上の入力フォームで、ボタン１つでパスワードを表示・非表示を切り替える機能がありますよね。
今回は、この機能をJavScriptのライブラリ、jQueryを用いて簡単に実装していきます。
まさにこんな感じのやつです。
では、さっそく見ていきましょう。
実際のコード
まずは、HTMLとJavaScriptのコードから見ていきます。
HTMLファイル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>formtest</title> <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <form> <label for="password"> <span>パスワード <i class="far fa-eye" id="passEye"></i></span> <input type="password" name="password" id="password"> </label> <input type="submit" value="送信する"> </form> </body> <script src="script.js"> </html> |
JSファイル
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function() { $('passEye').click(function() { if ($(this).hasClass('fa-eye')) { $(this).removeClass('fa-eye').addClass('fa-eye-slash'); $('#password').attr('type', 'text'); } else { $(this).removeClass('fa-eye-slash').addClass('fa-eye'); $('#password').attr('type', 'password'); } ); } |
コード自体はシンプルで、こんな感じです。
今回は、パスワードを表示・非表示を表すボタンを、Font Awesomeのアイコンを使って実装しました。
なんやそれって思った方は、こんな感じのやつだと思ってください。
Font Awesomeの使い方は、【超簡単】 Font Awesomeの使い方を参考にしてみてください。
では、コードの内容を解説していきます。
簡単に言うと、上に載せた目玉をクリックしたときに、type=”password”のinputタグのtype属性の値をtype=”text”に変更して、それと同時にFont Awesomeのクラス属性も変更しているだけです。
|
1 2 3 |
$('passEye').click(function() { } |
この中に目玉のクリックイベントを書いています。
この関数の中身では、まず、目玉をクリックしたときにパスワードがすでに表示されているかを判定します。
|
1 2 3 4 5 |
if ($(this).hasClass('fa-eye')) { } else { } |
if文の条件式のところで、Font Awesomeのクラスを調べます。
ここでは、スラッシュ無しの目玉のクラス属性の値を持っていないかを判定しています。
←これです。
今回は、目玉が開いているときにパスワードが非表示ですので、このときにクリックされた場合はpassword属性の値をtextに変更してパスワードを表示していきます。
この部分です。
|
1 2 |
$(this).removeClass('fa-eye').addClass('fa-eye-slash'); $('#password').attr('type', 'text'); |
これが、if文の条件がtrueだったときの処理です。
まず、目玉にスラッシュを入れるためにFont Awesomeのクラス属性の値を変更しています。
その後に、inputタグのtype属性をtype=”text”に変更しています。
これでパスワードが表示されます。
else文の中には、今とは逆の処理をしてあげればいいわけですね。
つまり、Font Awesomeのアイコンをスラッシュ無しの目玉に変えて、inputタグのtype属性をtype=”password”に変更するだけです。
|
1 2 |
$(this).removeClass('fa-eye-slash').addClass('fa-eye'); $('#password').attr('type', 'password'); |
よくわからなかった人も、もう一度見直してみると簡単に実装できると思うので、自分でコードを書きながら確認してみてください。