How to icon in password field to show & hide password in rails

Question

My code:

div.form-group.col-md-12
              label =t('.password')
              = f.text_field :password,
                      required: true,
                      label: false,
                      type: 'password',
                      placeholder: 'Password',
                      input_html: {autocomplete: "new-password"},
                      class: 'form-control input-sm form-control-sm'

This form field is for taking input of password. I want an eye button in the right side of the input field box which will toggle password show & hide. I know it can be done by JS. But I don't know how to.

Answer 1

 $("body").on('click', '.toggle-password', function() { $(this).toggleClass("fa-eye fa-eye-slash"); var input = $("#pass_log_id"); if (input.attr("type") === "password") { input.attr("type", "text"); } else { input.attr("type", "password"); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password">Show/Hide</span> <input type="password" id="pass_log_id"/>

=> behalf of html you can use this code

%script{:src => "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"}
%span.fa.fa-fw.fa-eye.field_icon.toggle-password{:toggle => "#password-field"} Show/Hide
%input#pass_log_id{:type => "password"}/