1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript】アイコンでパスワードの表示を切り替える(複数)

Posted at

スクリーンショット 2022-10-25 151336.png

アイコンを押下したらパスワードの表示/非表示を切り替え、なおかつアイコンも変化させたいと思いまして久しぶりJs,,
HTML側

html
// font Awesome使用するにあたってのCDNコード
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer" />

<table>
    <tr>
        <th>パスワード</th>
            <td>
                <input type="password">
                //↓font awesomeアイコンコードの中にtoggle-eyeクラス追加付与
                <i class="fa-regular fa-eye toggle-eye"></i>
            </td>
    </tr>
    <tr>
        <th>パスワード(確認)</th>
            <td>
                <input type="password">
                //↓font awesomeアイコンコードの中にtoggle-eyeクラス追加付与
                <i class="fa-regular fa-eye toggle-eye"></i>
            </td>
    </tr>
</table>

JavaScript側

js
 let eye = document.getElementsByClassName("toggle-eye");

 for(let i = 0; i < eye.length; i++){
    eye[i].addEventListener("click",() => { 
             if (eye[i].previousElementSibling.getAttribute('type') == 'password') {
                  eye[i].previousElementSibling.setAttribute('type', 'text');
                  eye[i].classList.toggle('fa-eye');
                  eye[i].classList.toggle('fa-eye-slash');
             } else {
               eye[i].previousElementSibling.setAttribute('type', 'password');
               eye[i].classList.toggle('fa-eye');
               eye[i].classList.toggle('fa-eye-slash');
             }
    });
}

●class取得の場合for文で回す必要がある
●previousElementSibling = (ひとつ前の要素)
●Attribute('type') = (typeの属性)

class="toggle-eye"が付与されてる要素クリックされたとき、
ひとつ前の要素(この場合input)のtype="password"からtype="text"に変わり、
font awesomeアイコンコード class="fa-eye"から"class="fa-eye-slash"に変わります。

toggleなのでもう一度押下すると
ひとつ前の要素のtype="text"からtype=""password"に変わり、
font awesomeアイコンコード class="fa-eye-slash"から"class="fa-eye"に変わります。

~~ ~~ ~~ ~~ ~~ ~~

font awesomeですが、いつの間にかいろいろ仕様が変わっていました..

class取得によるパスワード表示/非表示がググってもあまり情報が無かった為
試行錯誤の末、完成したコードになります。
もっと効率の良い、簡略化できるものがございましたら
是非コメントにて記載お願い致します!

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?