如何关闭 html 输入表单字段建议？

Question

通过建议，我的意思是当您开始输入时会出现下拉菜单，它的建议是基于您之前输入的内容：

例如，当我在标题字段中输入“a”时，它会给我很多非常烦人的建议。有人知道如何关闭它吗？提前致谢。

原文由 Joseph 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你想要的是禁用 HTML autocomplete 属性。

在这里设置 autocomplete=“off” 有两个效果：

它阻止浏览器保存字段数据，以便以后在类似表单上自动完成，尽管启发式方法因浏览器而异。它阻止浏览器在会话历史记录中缓存表单数据。当表单数据缓存在会话历史中时，用户填写的信息将在用户提交表单并单击返回按钮返回原始表单页面后可见。

阅读有关 MDN 网络 的更多信息

这是一个如何做到这一点的例子。

 <form action="#" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

如果它在 React 框架上，则使用如下：

 <input
    id={field.name}
    className="form-control"
    type="text"
    placeholder={field.name}
    autoComplete="off"
    {...fields}/>

链接到 反应文档

更新

这是修复某些浏览器跳过“autocomplete=off”标志的更新。

 <form action="#" autocomplete="off">
  First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
  <input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
  <input type="submit">
</form>

原文由 CodeMonkey 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这个解决方案对我有用：添加 readonly 属性。

这是修复某些浏览器跳过 "autocomplete=off" 标志的更新。

 <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">

原文由 Tayyab Chaudhary 发布，翻译遵循 CC BY-SA 4.0 许可协议