Question

我正在尝试使用登录页面创建一个网页。当用户第一次登录时，浏览器将保存用户名和密码，如果他检查＆＃34;保持登录状态＆＃34;。当他第二次登录时，浏览器会自动填写表单，我可以登录他，而不需要他与页面进行交互。

问题是，我无法从登录表单中获取密码。看看我的代码：

$(document).ready(setTimeout(function() {
  loginForm.form.submit(function(e) { // I don't have a onsubmit action defined on the login form
    console.log("Submit");
    checkLogin(); // This function should get the username and password value and makes a credential check but I cant get the password here
  });
  var username = $(".login-form__username").val();
  var password = $(".login-form__password").val(); // This always is "", an empty string!
  if (username) { // If the username is set we assume its an autofill
    console.log("autofilled");
    loginForm.form.submit(); // I manually fire the submit event when the browser autofills the username and password field
  }
}, 100));

我可以清楚地看到，用户名和密码都填写到表单中，但不知怎的，我无法获取密码。一切顺利如果我手动点击表单的提交按钮。这当然会触发checkLogin();，我可以在这里获取密码。但是如果我在文档就绪事件之后手动触发事件，它就无法工作。

有谁知道如何解决这个问题，或者为什么会这样？

谢谢大卫

修改

我刚才发现，这个问题仅出现在Chrome for Mac 上，它就像Chrome for Windows和Firefox上的魅力一样。这不适用于Safari，因为您需要选择要登录的用户。

此外我还想到，焦点需要设置为网页itselfe，而不是URL-Bar或refreshButton

Answer 1

＆＃34;保持登录状态＆＃34;和浏览器Autofill是两双鞋。＆＃34;保持登录状态＆＃34;通常由包含当前用户信息的cookie或本地存储实现。在您的页面上运行的脚本会检查并记录用户或将其发送到登录表单。

自动填充是一种浏览器功能，要求用户在浏览器中存储凭据。如果是存储的东西，你不能通过javascript知道。但您可以尝试检查输入内容的长度并盲目提交。如果它有效，凭证是正确的。

Answer 2

您可以在浏览器的本地存储中存储表单用户名和密码

localStorage.setItem("username", "Danyial.com");
localStorage.setItem("password", "1234567901");

获得价值并以表格形式出现

  var username =localStorage.getItem("username"); 
  var password =localStorage.getItem("password"); 
  $(".login-form__username").val(username);
  $(".login-form__password").val(password);

检测登录表单的自动填充

2 个答案: