antd input 输入内容时如何防止浏览器出现下拉选择框？

Question

antd input 输入内容时如何防止浏览器出现下拉选择框？

<Form
  form={form}
  autoComplete="off"
>
  <Form.Item
    label="手机号码"
    name="person_mobile"
    rules={[{ pattern: /^1\d{10}$/, message: '请输入正确手机号' }]}
    >
    <Input autoComplete="off" />
  </Form.Item>
</Form>

Answer 1

https://segmentfault.com/a/11...
对于chrome浏览器，如果页面上有两个以上的password类型输入框，自动填充的时候只会填充第一个以及改输入框的上一个，分别填充账号和密码。

但是前提是该password输入框必须是可见的，不能是display: none;或者visibility: hidden;，所以，对于需要隐藏的输入框，我们设置宽度为0，高度为0，透明度为0，绝对定位，在页面上方很高的位置，这样的设置，既保证了该元素的可见性，又确保不会因为意外而影响到页面的其他元素。
如下：

.hide-input{
    width: 0;
    height: 0;
    position: absolute;
    top: -100000px;
    opacity: 0;
}

<input type="text" class="hide-input"> 
<input type="password" class="hide-input"> 
<input type="password" placeholder="请输入密码" />

Answer 2

这个是浏览器默认保存的input缓存, 清理一下就可以了 也可以给input或form添加这个属性autocomplete="off"可以防止当前的表单被缓存, 如果希望全局不出现可以添加:

<meta   http-equiv= "Pragma"   content= "no-cache" /> 
<meta   http-equiv= "Cache-Control"   content= "no-cache" /> 
<meta   http-equiv= "Expires"   content= "0" /> 

禁止页面读取缓存数据

Answer 3

这个东西并不是 AntD 的 <input> 组件提供的功能，而是浏览器提供的。之前张鑫旭大佬有研究过相关内的内容 👉 聊聊:autofill和autocomplete自动填充

结论就是：大多数情况下，输入框的自动填充行为我们无需处理，用户并不在意输入框颜色变了，或者出现一些样式不一致的提示效果。

主要是各个浏览器并不想你去管怎么多，我想要填or用户想要填怎么还要轮到你来管的态度。所以兼容性如下，只是一段时间支持了后期也会变成部分支持 ┑(￣Д ￣)┍。