解决autocomplete="off"关闭自动填充在某些浏览器失效问题

2023-04-08 357点热度 0人点赞 0条评论

在有些表单的设计中,有需求是不需要让浏览器自动填充,一半来说只要给input等输入框加上 autocomplete="off" 就可以了,但是有些浏览器并不遵守这个规则,还是会弹出自动填充的功能。

研究下来,有个办法,可以给input输入框增加readonly只读属性,但是问题来说,增加了readonly后,就无法输入内容了,所以可以这样做,监听focus和blur 根据焦点情况来控制readonly属性,代码如下:

<input 
type="text"
name="email"
autocomplete="off" 
onfocus="this.removeAttribute('readonly')"
onblur="this.setAttribute('readonly',true)"
 />

如果是vue,可以这样子(iView的组件,其他的类似):

<i-input
v-model="password"
:readonly="passwordReadonly"
@on-focus="passwordReadonly=false"
@on-blur="passwordReadonly=true"
type="password"
placeholder="请输入密码" 
maxlength="100"
autocomplete="off" />

 

admin

这个人很懒,什么都没留下

文章评论

您需要 登录 之后才可以评论