密码显示/隐藏 fontawesome 图标问题，未放入输入字段

Question

Here is my code:

  <div class="form-group">
<label>Password</label>
<div class="input-group" id="show_hide_password">
 <input class="form-control" name="password" type="password">
 <div class="input-group-addon">
 <a href=""><i class="fas fa-eye-slash" aria-hidden="true"></i> </a>
 </div>
</div>
</div>

its output is like this: Here is my code output screenshot

The problem is right side icon is:

1. fa-eye-slash not changing to fa-eye
2. right side icon is not placed inside the input field

Update
I forget to post my javascript:

$(document).ready(function() {
    $("#show_hide_password a").on('click', function(event) {
        event.preventDefault();
        if($('#show_hide_password input').attr("type") == "text"){
            $('#show_hide_password input').attr('type', 'password');
            $('#show_hide_password i').addClass( "fa-eye-slash" );
            $('#show_hide_password i').removeClass( "fa-eye" );
        }else if($('#show_hide_password input').attr("type") == "password"){
            $('#show_hide_password input').attr('type', 'text');
            $('#show_hide_password i').removeClass( "fa-eye-slash" );
            $('#show_hide_password i').addClass( "fa-eye" );
        }
    });
});

Thanks & Best Regards

Answer 1

As said in the comment, you need class="input-group-text" , also in 5.6 its input-group-append not input-group-addon .

Then to toggle the show/hide, put a class on the link, then on click, find the outer .input-group cache it into a var so can reuse it to find() the other elements, then toggle them, can use a ternary for input type and toggleClass() for the icon.

 $(document).ready(function() { // target the link $(".toggle_hide_password").on('click', function(e) { e.preventDefault() // get input group of clicked link var input_group = $(this).closest('.input-group') // find the input, within the input group var input = input_group.find('input.form-control') // find the icon, within the input group var icon = input_group.find('i') // toggle field type input.attr('type', input.attr("type") === "text"? 'password': 'text') // toggle icon class icon.toggleClass('fa-eye-slash fa-eye') }) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"> <div class="form-group"> <label>Password</label> <div class="input-group"> <input class="form-control" name="password" type="password"> <div class="input-group-append"> <span class="input-group-text"> <a href="#" class="toggle_hide_password"> <i class="fas fa-eye-slash" aria-hidden="true"></i> </a> </span> </div> </div> </div>