パスワード入力欄に目玉マークを付けてみた

2023年12月19日

パスワードを入力する。
最近では当たり前のようにパスワードを入力するシーンがあります。

パスワード入力欄は、文字を入力しても黒丸（･･･）で表示され、何を入力したかはわかりません。
ですが、最近のパスワード入力欄には「目玉マーク」がついており、クリックすると入力したパスワードが表示されます。

パスワード入力欄にこれがあると便利だなと思い、実装方法について調べてみました。
忘備録として記録いたします。

まずはできたものがこちらです

完成したものがこちらです。
目玉マークをクリックするとパスワードが表示され、
再度目玉マークをクリックするとパスワードが非表示になります。

目玉マーク実装のやり方

目玉マーク実装は、やってみたら思いのほか力技でした。
目玉マークを用意して、Jqueryで動作させます。
Javascriptで非表示（type=password）と表示（type=text）を切り替えています。
手順は以下の通りです。

1. 目玉マークを用意する
2. スタイルシートで見た目を調整する
3. Javascriptでクリック時の動作を組みむ

順を追って説明いたします。

１．目玉マークを用意する

目玉マークはなんでもOKです。
画像でもOKです。
だたし、目玉の開いているもの、目玉の閉じているもの2種類が必要です。
今回はFont Awesomeから目玉マークを使用しました。

目玉が開いているアイコンコード

目玉が閉じているアイコンコード

２．スタイルシートで見た目を調整する

目玉付きパスワード入力欄のHTMLは以下の通りです。

input タグに目玉マークのアイコンを並べています。
ただこれだけだと次のように表示されます。

入力フォームの外側に目玉マークが表示されています。
これでもOK！。という場合はこのまま次のフェーズへ進みます。
枠の中に目玉マークを入れたいという場合は、スタイルシートで調整します。

コツとしては、外枠をdivタグで表現します。

見た目を調整するスタイルシート

inputの外枠線を非表示にして、divタグに枠線をつけて、目玉マークを含めて一つの入力フォームのように見せています。

iタグ（目玉マーク）に横幅、高さを指定しているのは、目を開いているアイコンと、目を閉じているアイコンのサイズが異なり、目玉を押したときにずれないようにサイズを統一するためです。

スタイルシートで調整するとそれっぽくなります

スタイルシートで調整すると、見た目もよい感じになりました。

３．Javascriptでクリック時の動作を組みむ

最後に、Javascriptで目玉マークをクリックしたときの動作を組みます。
今回は、以下のようにしています。

目玉マークがクリックされたら発火するようにしています。
iタグには、Font Awesomeのクラス（fa-eye）が指定されているため、これを利用します。
具体的には、iタグにfa-eyeクラスを持っていれば、目玉オープン状態と判断し、目玉クローズを指定します。

fa-eyeクラスを持っていなければ、目玉クローズ状態と判断し、目玉オープンを指定します。

この切り替えに合わせて、inputタグの「type=text」と「type=password」を切り替えます。

これで切り替えができました。

目玉マークを画像で切り替える場合は、クラスによる分岐を、画像名による分岐に置き換えます。

セキュリティと利便性の優先度を考える

パスワード欄に入力した文字が非表示になっているのは、セキュリティ性を高めるためです。
自分以外の人に画面を見られても、パスワードが流出しないようにするためです。

ただ、入力した文字が見えないことで「入力間違い」「パスワード確認ができない」といった弊害もあります。

どちらを優先するかは設計段階で使い分けるほうがよさそうです。
例えば、閲覧パスワードなど比較的重要度の低いものは、目玉マークがあったほう利便性が高いですし、管理者権限をもつパスワードであれば、セキュリティを優先し、目玉マークを付けないほうが良いといえます。

ケースバイケースで考えることも大事です。