如何让浏览器保存密码而不重定向？

Posted 2023-02-24

【中文标题】如何让浏览器保存密码而不重定向？

【英文标题】：How to make browser save password without redirect?

【发布时间】：2020-10-11 00:38:05

【问题描述】：

我们有一个带有 username password 输入和一个按钮的表单。单击按钮时，表单会通过将 /? 添加到当前 url 来重定向到另一个 url，这是不受欢迎的行为。

如果我们添加event.preventDefault()，它会阻止浏览器提供保存用户名和密码（见下图，我的意思）。

这里是代码。它不会在此处重定向，因为它在 sn-p 内。

document.getElementById('send').addEventListener('click', (event) => 
  //event.preventDefault()
  console.log('test')
)

<form>
  <div>
    <label for="username">username</label>
    <input
      id="username"
      type="text"
      autocomplete="username"
    />
    <label for="password">password</label>
    <input
      id="password"
      type="password"
      autocomplete="new-password"
    />
  </div>
  <button id="send">send</button>
</form>

我尝试使用 div 代替 form 标记，但它也阻止了自动完成功能。

另外，here 您可以使用浏览器提供的保存密码来测试表单。从here复制代码

如何防止按钮点击重定向并保留浏览器的自动完成功能？

【问题讨论】：

为什么在autocomplete中使用这些值？

@Raxel21 这些值是为了让浏览器保存密码。请看这里：developer.mozilla.org/en-US/docs/Web/html/Attributes/…

【参考方案1】：

为了防止按钮点击重定向，设置按钮元素的 type="button"，这会将按钮元素变成一个普通的按钮，然后你知道你将使用 AJAX 提交表单：

<button id="send" type="button">send</button>

这就是你要找的答案

【讨论】：

我已经尝试过您的解决方案，但它不起作用。它不会重定向，但它会使自动完成功能不起作用，与event.preventDefault 相同。

【参考方案2】：

我没有检查。但是你可以试试这个：

document.getElementById('send').addEventListener('click', (event) => 
  console.log('test');
  return false;
)

【参考方案3】：

用于自动完成的“新密码”值应该防止自动填充，因为浏览器希望在那里输入新密码。根据MDN：

使用 autocomplete="new-password" 防止自动填充

如果您要定义用户管理页面，用户可以在其中指定 另一个人的新密码，因此您要防止 自动填充密码字段，您可以使用 自动完成=“新密码”。

我认为this answer 可能会有所帮助