نمایش پسورد در جاوااسکریپت

ابتدا یک فرم لاگین با ساختار html با class های بوتسترپ  ایجاد کردیم

 <form id="login">
     <div class="form-row">
          <h4 class="title text-center pb-۳">Login Form</h4>
          <div class="col-12">
               <div class="input-group mb-۳">
                    <div class="input-group-prepend">
                         <span class="input-group-text btn-toggle" id="basic-addon۱">
                              <i class="fas fa-user"></i>
                         </span>
                    </div>
                    <input name="username" type="text" class="input form-control" id="username"
                         placeholder="username" />
               </div>
          </div>
          <div class="col-12">
               <div class="input-group mb-۳">
                    <div class="input-group-prepend">
                         <span class="input-group-text btn-toggle" id="basic-addon۱">
                              <i class="fas fa-lock"></i>
                         </span>
                    </div>
                    <input name="password" type="password" class="input form-control" id="password"
                         placeholder="password" required="true" />
                    <div class="input-group-append">
                         <span class="input-group-text btn-toggle" onclick="password_show_hide();">
                              <i class="fas fa-eye" id="show_eye"></i>
                              <i class="fas fa-eye-slash d-none" id="hide_eye"></i>
                         </span>
                    </div>
               </div>
          </div>
          <div class="col-12 text-start">
               <button class="btn btn-primary" type="submit" name="signin">login</button>
          </div>
     </div>
</form> 

برای تگ input یک id در نظر گرفتیم که برابر با password هست

  <input name="password" type="password" class="input form-control" id="password" placeholder="password" required="true"/>  

یک تگ span گذاشتیم و برای این تگ یک رویداد onclick  تعریف شد و یک تابع یا function به اسم password_show_hide() ایجاد کردیم

  <span class="input-group-text btn-toggle" onclick="password_show_hide();">  

درون تگ span از دو آیکون استفاده کردیم با class های fas fa-eye و fas fa-eye-slash

  <i class="fas fa-eye" id="show_eye"></i> 
 <i class="fas fa-eye-slash d-none" id="hide_eye"></i>  

در مرحله اول میخوایم فقط ایکون fa-eye نمایش بده پس برای ایکون fa-eye-slash باید display برابر با none قرار بدیم .

برای نمایش آیکون ها از کتابخونه fontawesome  استفاده کردیم .

تو مرحله ی بعد برای هرکدوم از آیکون ها یک id درنظر گرفته شد.

  id="show_eye" id="hide_eye"  

بریم سراغ کدهای جاوااسکریپت

 function password_show_hide() {
     var password = document.getElementById("password");
     var show_eye = document.getElementById("show_eye");
     var hide_eye = document.getElementById("hide_eye");
     hide_eye.classList.remove("d-none");
     if (password.type === "password") {
          password.type = "text";
          show_eye.style.display = "none";
          hide_eye.style.display = "block";
     } else {
          password.type = "password";
          show_eye.style.display = "block";
          hide_eye.style.display = "none";
     }
}  

در ابتدا تابع یا function که در رویداد onclick به اسم password_show_hide() ایجاد کردیم را مینویسیم  تا بتوانیم به id  هایی که در فرم html تعریف کردیم از طریق متد getElementById در جاوااسکریپت دسترسی داشته باشیم.

  var password = document.getElementById("password"); 
 var show_eye = document.getElementById("show_eye"); 
 var hide_eye = document.getElementById("hide_eye");  

همونطور که گفتیم مرحله اول میخواستیم id  آیکون  fa-eye-slash  نمایش نده، پس باید به این شکل تعریف کنیم

 hide_eye.classList.remove("d-none"); 
hide_eye.classList.remove("d-none");  

به  hide_eye  ویژگی classList دادیم و از طریق متد remove باید display  رو برابر none  قرار دهیم.

حالا میخوایم زمانیکه  پسووردی وارد کردیم و روی ایکون کلیک شد ، هم پسوورد نمایش بده و هم ایکون تغییر کنه ،  پس اینجا یک شرطی گذاشتیم.

 if (password.type === "password") {
     password.type = "text";
     show_eye.style.display = "none";
     hide_eye.style.display = "block";
} else {
     password.type = "password";
     show_eye.style.display = "block";
     hide_eye.style.display = "none";
}  

گفتیم اگه password.type برابر بود با مقدار password شما password.type  رو برابر با text قرار بده یعنی type رو عوض کن و ایکون  show_eye باید display  برابر با none قرار بدیم تا نمایش نده  و حالا  ایکون hide_eye  باید display  برابر با block قرار داده شود تا نمایش بده و درغیر اینصورت password.type رو برابر با password قرار بده  و show_eye باید display برابر با block و hide_eye باید display برابر با none شود.

یعنی اگر یکبار روش کلیک شد type برابر با  text  شود و دوباره کلیک شد type برابر با password شود.