Question

在视图中，我有以下红宝石代码：

Password: <input type="password" value= <%= @user_credentials.first.encrypted_password %> id="myInput">
<input type="checkbox" onclick="myFunction()">  Show Password

在js文件app/assest/js中，我具有以下功能，但是选中此复选框时无法切换密码。

function myFunction () {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

Answer 1

如果有任何用户忘记添加引号，浏览器会自动添加引号。这是浏览器的行为。因此，如果在任何属性后放置任何空格，浏览器将自动在该属性周围加上引号，并且它将忽略该空格之后的所有内容。这会弄乱您元素的标记代码。

标记中的任何属性后不应有空格。

value= <%= @user_credentials.first.encrypted_password %>

您可以通过将其用引号引起来对其进行修复：

value="<%= @user_credentials.first.encrypted_password %>"

Answer 2

问题出在value属性代码中。

以下代码片段可以正常工作。

所以js和html代码都可以。

只需正确格式化动态红宝石零件即可。

我想它应该带有引号（对于有效的html）：

value="<%= @user_credentials.first.encrypted_password %>"

function myFunction() {
  var x = document.getElementById("myInput");
  if (x.type === "password") {
     x.type = "text";
  } else {
     x.type = "password";
  }
}

Password: <input type="password" value="123" id="myInput">
<input type="checkbox" onclick="myFunction()">  Show Password

如何切换密码

2 个答案: