解决方法:将输入框默认设为只读状态,当获取焦点的时候,再将自身的只读属性去除
例如:(使用的是Ant Design库里面的组件,vue2的项目)
1 <a-form-item>
2 <a-input
3 read-only // 只读属性
4 onfocus="this.removeAttribute('readonly');" // 获取焦点时删除只读属性
5 size="large"
6 v-model="mobile"
7 type="text"
8 placeholder="请输入手机号">
9 <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }" />
10 </a-input>
11 </a-form-item>
12 <a-form-item>
13 <a-input-password
14 read-only
15 onfocus="this.removeAttribute('readonly');"
16 v-model="password"
17 size="large"
18 autocomplete="false"
19 placeholder="密码">
20 <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }" />
21 </a-input-password>
22 </a-form-item>