在 rails 设计中显示密码按钮

Question

在我的 rails 中，我正在使用设计进行身份验证，我想在密码字段附近添加一个按钮，点击该按钮用户将能够看到他们输入的密码。

我尝试为此使用 javascript，添加了一个复选框并在函数中给它一个 onclcick 函数，如果用户点击按钮，密码类型会更改为文本，反之亦然。

这里有问题。

<div class="form-group">
        <div class="input-group" style="z-index: 0;">
            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
            <%= f.password_field :password, class: 'form-control password', autocomplete: "current-password", placeholder: "Your Password" %>
            <input type="checkbox" class="eye_icon" onclick="myFunction()">Show Password
        </div>
    </div>




<script>
$(".eye_icon").on('click',myFunction() {
    if ($(".password").attr('type') === 'password') {
        $(".password").attr('type', 'text');
    } else {
        $(".password").attr('type', 'password');
    }
});
</script>

Answer 1

我认为你的 JS 有问题，具体在这里使用 myFunction，应该只是 function。我怀疑如果您使用当前的 JS 查看控制台，您会收到一个错误 Uncaught SyntaxError: missing ) after argument list，在您对下面的代码进行更改后，该错误应该会消失。其他一切看起来都很好。

$(".eye_icon").on('click',function() {
  if ($(".password").attr('type') === 'password') {
      $(".password").attr('type', 'text');
  } else {
      $(".password").attr('type', 'password');
  }
});

另外，你在HTML中添加的点击功能需要出来。请注意该函数是如何被调用的 myFunction 但您没有在任何地方创建一个调用该函数的函数。我猜 JS 有点新。因此，更改 HTML 以匹配下面的行，您应该可以开始了。

<input type="checkbox" class="eye_icon">Show Password

在 rails 设计中显示密码按钮

Show password button in rails devise

ruby-on-rails

devise