如何禁用Chrome对type="number"输入框的「使用建议密码」提示？

Chrome对type="number"输入框触发密码建议确实不合理，以下是几种在React/Next.js里可用的解决方法：

• 直接给输入框添加autocomplete="off"属性，这是最常用的方式：

<input type="number" autocomplete="off" />

• 如果autocomplete="off"不生效，可以试试Chrome专属的autocomplete="chrome-off"：

<input type="number" autocomplete="chrome-off" />

• 若上述方法都不行，可尝试readonly hack：先给输入框加readonly，聚焦时移除该属性，绕过浏览器的自动填充检测：

<input 
  type="number" 
  readonly 
  onFocus={(e) => e.target.removeAttribute('readonly')}
/>

• 给包裹输入框的表单添加autocomplete="off"，全局禁用表单内的自动填充：

<form autocomplete="off">
  <input type="number" />
</form>

注：React和Next.js框架不会影响该问题的解决，以上方法均适用于这两个框架。

内容的提问来源于stack exchange，提问作者Aezral