アイコンを押下したらパスワードの表示/非表示を切り替え、なおかつアイコンも変化させたいと思いまして久しぶりJs,,
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側
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取得によるパスワード表示/非表示がググってもあまり情報が無かった為
試行錯誤の末、完成したコードになります。
もっと効率の良い、簡略化できるものがございましたら
是非コメントにて記載お願い致します!