阻止 Chrome 中的 Android 键盘在 HTML 输入上显示密码管理

Question

我有一个 HTML<input>元素，当它集中在 Chrome android 中时，会在键盘上方显示这个恼人的密码管理功能，该功能占用了屏幕空间。它不是密码类型字段，所以我不确定为什么会发生这种情况。知道如何摆脱它吗？

\n

<form id="guess-form" class="svelte-1o40qmd">\n    <button id="btn-top" type="button" class="svelte-1o40qmd">\xe2\x96\xb2 Top</button> \n    <input id="input-guess" \n      type="text" \n      spellcheck="true" autofocus="" \n      placeholder="Something" \n      autocomplete="off" \n      title="Something" \n      class="svelte-1o40qmd"/> \n    <input id="submit" type="submit" value="Guess" class="svelte-1o40qmd"/>\n</form>\n

\n

\n

更新：这是一个 Chrome 错误，因此请记住将其报告给 Chrome 团队（帮助 -> 报告问题）。

\n

Answer 1

我在创建一个非常相似的东西时遇到了这个问题。这肯定是 Android Chrome 的一个错误，因为在那里显示密码栏是没有意义的。

单击示例输入元素时，该问题在MDN上很明显。它发生在type="text", type="number", type="password", type="tel", type="url",type="email"

但幸运的是，如果您将其转换为搜索输入，则不会发生这种情况，例如。

<input type="search" />

就我而言，输入实际上可以被视为某种搜索输入，因此我很乐意将其更改为搜索输入，因为它具有语义意义。

对于那些只想摆脱不必要的密码栏的人来说，您将不得不权衡是否值得放弃语义和可访问性。

您将需要添加一些额外的样式来尝试使其看起来像普通的文本输入。在我的测试中，我只真正注意到 iOS 中样式的差异，即在输入的开头添加了一个小搜索图标。要删除它，您可以将以下 CSS 规则添加到输入中

-webkit-appearance: none; 

为了完整起见，您可能还想处理无前缀和 moz 前缀的版本。

appearance: none;
-moz-appearance: none;

*OP 旁注：我在 Svelte 中构建一个小游戏时也遇到了这个问题，所以我的输入看起来几乎与你的相同！您可以在此处查看游戏，输入现已更改为搜索输入*