Javascript 检测登录表单的自动填充

我正在尝试创建一个带有登录页的网页。当用户首次登录时，如果选中“保持登录”，浏览器将保存用户名和密码。当他第二次登录时，浏览器将自动填充表单，我可以让他登录，而无需他与页面交互

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

$(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（）我可以在这里获得密码。但是，如果在document ready事件之后手动触发该事件，它将无法工作

有人知道如何解决这个问题，或者为什么会发生这种情况吗

谢谢，大卫

编辑

我刚刚发现，这个问题只出现在Chrome for Mac上，它在Chrome for Windows和Firefox上就像一个符咒。这在Safari上不起作用，因为您需要选择要登录的用户

此外，我还发现，焦点需要设置为网页本身，而不是URL栏或刷新按钮上的“保持登录”，而浏览器自动填充是两双鞋。“保持登录”通常由包含当前用户信息的cookie或本地存储实现。页面上运行的脚本将检查并登录用户，或将用户发送到登录表单

自动填充是一种浏览器功能，要求用户在浏览器中存储凭据。您无法通过javascript知道存储的是什么。
但是你可以试着检查你输入内容的长度，然后盲目地提交。如果有效，则凭据是正确的。
您可以将表单用户名和密码存储在浏览器的本地存储器中

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); 

您在首次加载页面时设置的是
用户名
和
密码
，而不是在用户提交表单时。什么是
loginForm.username.val（）
？@Barmar这两行只是为了验证浏览器是否自动填写表单。因此，如果usernames值不为空，它将触发submit事件。我会编辑我的question@lshettyl我更新了我的问题，它与
$（“.login-form\uuuu username”）.val（）相同。这可能会有帮助，这似乎正是他想要做的。他检查用户名字段是否已经填写。@localghost是的，我就是这么做的。如果他在我的表单中填写了给定的凭据，我将尝试使用浏览器中的给定凭据登录。如果凭据错误，我将通知用户。我不能使用cookies，因为这个网站运行在一个专门设计的小型服务器上。而且对他来说做饼干也不容易。