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

Question

我有一个 HTML

<input>

元素，当聚焦在 Chrome android 中时，它会在键盘上方显示这个烦人的密码管理功能，它会占用屏幕空间。这不是密码类型字段，所以我不确定为什么会这样。知道如何摆脱它吗？

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

更新：这是一个 Chrome 错误，所以记得将它报告给 Chrome 团队（帮助 -> 报告问题）。

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 中构建小游戏时也遇到了这个问题，所以我的输入看起来与你的输入几乎相同！您可以在here看到游戏输入现在更改为搜索输入*