Eye in password field does not appear using bootstrap 5

Question

When using Bootstrap v5 and FontAwesome v5, I cannot get get the eyeball to appear to the right side of the form. Instead, it pulls the password field further to the right than the username field and the eye does not show.

Javascript

const togglePassword = document.querySelector("#togglePassword");
const password = document.querySelector("#password");

togglePassword.addEventListener("click", function () {
   
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";
password.setAttribute("type", type);

// toggle the eye icon
this.classList.toggle('fa-eye');
});

user_13833218 · Answer

When the icon overlaps the input, it goes beneath the input tag. To fix this you need to set the tag with a higher z-index value. Try with z-index: 100 to make it appear on top even when the input is clicked.

EDIT: If you want the password field and the username field to be in the same width, you can try wrapping the icon inside the input-group-text and remove the styling margin-left: -30px; z-index: 100; since input-group-text overlaps over the input field.

Edit 2: In your JavaScript code, you are hiding the eye icon with this.classList.toggle('fa-eye'). This function removes the class fa-eye when it is available in the classList of the togglePassword element and adds the above class when it is not available.

I assume that you want to show hide password icons which might be the eye-slash icon when the user is currently in the text format. So you can add

this.classList.toggle('fa-eye-slash');

as below

const togglePassword = document.querySelector("#togglePassword"); const password = document.querySelector("#password"); togglePassword.addEventListener("click", function () { // toggle the type attribute const type = password.getAttribute("type") === "password" ? "text" : "password"; password.setAttribute("type", type); // toggle the eye icon this.classList.toggle('fa-eye'); this.classList.toggle('fa-eye-slash'); });

user_148439 · Answer

Example using feather icons with Jquery 3.3 with Bootstrap 5

  feather.replace({ 'aria-hidden': 'true' });

$(".togglePassword").click(function (e) {
      e.preventDefault();
      var type = $(this).parent().parent().find(".password").attr("type");
      console.log(type);
      if(type == "password"){
          $("svg.feather.feather-eye").replaceWith(feather.icons["eye-off"].toSvg());
          $(this).parent().parent().find(".password").attr("type","text");
      }else if(type == "text"){
          $("svg.feather.feather-eye-off").replaceWith(feather.icons["eye"].toSvg());
          $(this).parent().parent().find(".password").attr("type","password");
      }
  });



    






  
      Password

user_16388565 · Answer

Try adding z-index:2; to your icon. To prevent your eye icon being hidden when the input field is focused, you would need to add the following css code:-

Also, please share us a visual or code for your username field so that we can get a better view of what you mean.

PS: I would prefer to avoid inline css as much as possible. Inline css might be troublesome when it comes to debugging large css codes.

user_7879409 · Answer

Implementation Jquery 3.6.0 with Bootstrap 5

HTML


    Password

JS

$(".togglePassword").click(function (e) {
e.preventDefault();
var type = $(this).parent().parent().find(".password").attr("type");
console.log(type);
if(type == "password"){
    $(this).removeClass("fa-eye-slash");
    $(this).addClass("fa-eye");
    $(this).parent().parent().find(".password").attr("type","text");
}else if(type == "text"){
    $(this).removeClass("fa-eye");
    $(this).addClass("fa-eye-slash");
    $(this).parent().parent().find(".password").attr("type","password");
}});

Eye in password field does not appear using bootstrap 5

4 Answers