如何在密码字段中添加眼睛图标以在轨道中显示和隐藏密码

Question

我的代码:

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'

这个表单字段用于输入密码。我想在输入框的右侧添加一个眼睛按钮，它将切换密码显示&隐藏。

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"/>

=比;代表HTML你可以使用以下代码

%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"}/