【JavaScript】Chromeでパスワード確認用の目を表示する

記事のターゲット

IEからのサービス移行で対応が必要な人
JavaScriptで動きを付けたい人
作業環境がすでに整っている人

1 目的
2 事前準備
3 やり方
4 まとめ

目的

　今回、皆さん一度は目にしたことがあるであろうパスワードの目ボタンを作っていこうと思います。下の画像のようにパスワードを入力すると打ち込んだ文字が黒ポチになり横に目のボタンが出てくるサイトがたまにあると思います。これを自作サイトにも実装したいと思ったのでやり方を紹介していきます。

事前準備

　まず、ボタンに使う画像を用意します。私は今回以下サイトからダウンロードしましたが、特に何でも大丈夫です。

https://icooon-mono.com/tag/%E7%9B%AE/　-商用利用可能アイコン素材ダウンロードサイトicooon-mono

自分は最小サイズの16px、PNG形式でダウンロードいたしました。

サイズは16pxにして色を黒と白の両方でPNG形式でダウンロードしています(ボタンを押したときに白黒を反転させるため)。

やり方

　以下はすでにフォーム画面等ができている前提で進めていきます。ちなみに今回JSPで実装しておりますが別にThymeleaf等のテンプレートでも特に問題なくできると思います。

下の画像は実装イメージです。パスワード入力欄とボタンを1つのものとして扱うために別の枠で2つの要素を囲んでいきます。

step
1パスワードのテキストボックス部分に下準備

<th>パスワード</th>
<td> 
    <!-- テキストボックスとアイコンをひとくくりにするクラス -->
    <div class="pass-frame" >
        <form:input type="password" path="password" id="password" />
            <button type="button" tabindex="-1" id="passWatch" onmousedown="mouseDown()" onmouseup="mouseUp()" onmouseout="mouseUp()">
                <!-- ダウンロードしてきた画像設定 -->
                <img src="../../../img/目の無料アイコン7.png"  id="icon">
            </button>
    </div>
</td>
~以下略~

以下コードの説明です。

使用コード	説明
tabindex="-1"	これを記述することによりボタンへタブ移動することを防げる。
onmousedown="mouseDown()"	ボタンが押されたときにmouseDown()を実行する(この後作ります)。
onmouseup="mouseUp()"	ボタンが元に戻ったときにmouseUp()を実行する(この後作ります)。
onmouseout="mouseUp()"	マウスカーソルがボタンから離れたときにmouseUp()を実行する。

step
2JavaScriptの記述

　次にJSの記述を進めていきます。外部ファイルに書いてもJSPに直接書いても特に問題はありません。今回はパスとかの説明を省略するため直接記述していきます。

記述についての説明はソース内のコメントで行ってしまっています。横着して申し訳ありません。

<head>
<title>ログイン</title>
<link rel="stylesheet" type="text/css" href="/css/style.css" />

<script>
window.onload = function(){
    //ボタンに設定した画像の初期状態を保存しておく(可視状態)
    const passWatch = document.getElementById("passWatch");
    const dispOrigin = passWatch.style.visibility;

    //遷移時はパスワードが入力されていないので画像を非表示にする
    passWatch.style.visibility = "hidden";

    //パスワードの状態を監視するための変数
    let imgChange = document.getElementById("password");

    //パスワードに文字が入力されたら画像を表示させる
    imgChange.addEventListener("input",function(){
        passWatch.style.visibility = dispOrigin;
    });

    //文字入力されるたびに文字があるかどうか判別する
    imgChange.addEventListener("keyup",function(){
        var password = document.getElementById("password").value;
        if(password.length == 0){
        passWatch.style.visibility = "hidden";
        }
    });

    //入力欄以外をクリックしたときの表示判断用フラグ
    let flag = 0;
    passWatch.addEventListener("mousedown", function(){
        flag = 1;
    });

    passWatch.addEventListener("mouseup", function(){
        flag = 0;
    });

    passWatch.addEventListener("mouseout", function(){
        flag = 0;
    });

    //入力欄外にカーソルが移った時の画像の扱い
    imgChange.addEventListener("blur", function(){
        if(flag === 1){
            return false;
        }else{
            passWatch.style.visibility = "hidden";
        }
    });
}
//領域内でマウスボタンを押した時
function mouseDown(){

    let password = document.getElementById("password");
    let eyeImg = document.getElementById("icon");

    //ボタンを押したときに画像の白黒を反転させている
    eyeImg.src = "../../../img/目の無料アイコン7反転.png"
    //画像を白くするので背景を黒くしたCSSを一時的に追加
    eyeImg.classList.toggle("reverse");

    password.setAttribute("type", "text");
    password.focus();
}

//領域内でマウスボタンを離した時
function mouseUp(){

    let password = document.getElementById("password");
    let eyeImg = document.getElementById("icon");

    //ボタンを離したときは黒い眼の画像に戻す
    eyeImg.src = "../../../img/目の無料アイコン7.png"
    eyeImg.classList.remove("reverse");

    password.setAttribute("type", "password");
    password.focus();
}

//領域内からマウスを離した時
function mousuOut(){

    let password = document.getElementById("password");
    let eyeImg = document.getElementById("icon");

    eyeImg.src = "../../../img/目の無料アイコン7.png"
    //ボタンを押したままマウスを範囲外に動かしたときに背景色を直す
    if(eyeImg.classList.contains("reverse")){
        eyeImg.classList.toggle("reverse");
    }


}
</script>
</head>

使用コード	説明
window.onload	画面遷移時にすぐに発動させたいときに記述。
passWatch.style.visibility = "hidden";	ボタンの要素を非表示にする。style.block = "none"にすると位置がずれるので注意。
document.getElementById("password")	document.getElementById("???")の???部分にidを指定することにより要素を取得。
addEventListener	指定したアクションが実行されたかどうかを監視する。実行されたら指定した動作をする。
blur	フォーカスが外れたかどうかを監視するための構文。
eyeImg.classList.toggle("reverse");	カッコ内で指定したCSSを一時的に追加する。

step
3CSSの記述

　下記のCSSは自分の環境に合わせて幅とかを決めているのでそのままコピーしても全く同じようになるとは限らないのでそこはご了承お願いします。

ただ#passwordと#passWatchのoutline: none;は指定しておかないとカッコ悪くなります。

.pass-frame{
    border:1px solid ;
    display:inline-block;
    position:relative;
    border-color: #000000;
    width: 210px;
}

#password{
    border:0;
    outline: none;
    margin-left: 0;
    width: 83%;
    height: 98%;
    padding-left: 0px;
    inset-inline-start: 0px;
    display: inline;
}

#passWatch{
    background-color:transparent;
    border:0;
    outline: none;
    padding: 5px -5px 0 0;
}

.reverse{
    background-color: black;
}

#icon{
    pointer-events:none;
    height: 14px;
    width: 14px;
    margin-bottom:-2px;
}

まとめ

　以上でパスワード表示ボタンが作れたかと思います。すべての環境で動くとは限りませんが、今回はjQueryを使用せずJSのみで記述しているので現場等でも活用できるかと思います。

正直もっと簡略化はできるかもしれませんがそこはごめんなさい。一応動くものは作れたのでメモがてら記事にしてみました。

これを機にJSへの興味が深まっていただけたら幸いです。