禁止谷歌浏览器自动填充密码,输入框背景颜色改变还原

云烟溪雪

已于 2023-04-09 13:44:52 修改

阅读量765

点赞数 2

CC 4.0 BY-SA版权

分类专栏： html vue 文章标签： javascript 前端 html

于 2023-04-09 13:39:41 首次发布

本文链接：https://blog.youkuaiyun.com/wxl1390/article/details/130041131

vue 同时被 2 个专栏收录

45 篇文章

订阅专栏

html

1 篇文章

订阅专栏

在Vue.js中，可以通过在type为password的input元素上添加auto-complete=new-password属性来阻止谷歌浏览器自动填充密码。对于HTML，同样可以使用autocomplete=new-password。此外，文章还提供了一个CSS样式来去除输入框被自动填充后的黄色背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

禁止谷歌浏览器自动填充密码

vue
在type为password的input中加auto-complete="new-password"属性即可

 <el-form-item label="新密码：" prop="newPassword">
       <el-input v-model="form.newPassword" type="password" placeholder="请输入新密码" auto-complete="new-password" ></el-input>
 </el-form-item>

js+html
添加 autocomplete="new-password"

<input  id="newPwd" type="password" size="35" placeholder="请输入密码"  autocomplete="new-password" />

input输入文字后背景色变成了黄色 CSS改变（去掉黄色背景）

CSS改变：

 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
   -webkit-box-shadow: 0 0 0px 1000px white inset
 }