element的form表单关闭自动填充

最新推荐文章于 2025-04-30 15:44:21 发布
最新推荐文章于 2025-04-30 15:44:21 发布
阅读量1.2k 收藏
点赞数
文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_53877433/article/details/126241681
版权

后台管理登录页面输入账号密码，输入框会缓存上一次的数据

解决方法：

        给el-form添加autocomplete =‘off’ 关闭自动填充

form表单禁止浏览器自动填充密码
IT博客技术分享
07-12 2427
form表单禁止浏览器自动填充密码
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
`msg`用于设置对话框的标题，而`form`则用于填充表单数据。为了在每次打开表单时清空数据，我们可以利用`el-form`提供的`resetField()`方法。在对话框打开时调用此方法，可以清除表单的所有字段。同样，当对话框关闭...
element UI的form 禁止浏览器自动填充用户名或密码
weixin_45024732的博客
07-26 1833
浏览器会默认将已保存的账号密码 填充到input type值为password的输入框内，如果在登录页面，这是期望的，但是如果在注册页面、新增账号等页面，这就是超出需求了， 普通的form表单内的input设置autoComplete="off"就可以了 <input type="password" autoComplete="off"/> 但是在element UI里面设置autoComplete="off"是不生效的，需要设置为new-password <el-input v-mo
vue elementui 去掉默认填充 密码input导致的默认填充
最新发布
qq_27806371的博客
04-30 515
auto-complete="new-password" 主要是这一句。
elementui 禁止浏览器自动填充用户名或密码
qq_36291747的博客
03-29 1274
给 el-input 元素添加 readonly 属性，并在 el-input 元素获得焦点时，移除 readonly 属性。 关键代码： readonly οnfοcus="this.removeAttribute('readonly');" elementui 禁止浏览器自动填充密码，代码示例如下： <el-form-item v-show="dialogType === 'add'" label="密码" prop="password" title="密码强度要求：需包
防止浏览器自动填充表单
Dronwing fish
04-22 2448
当我们在登录页选择记住密码后，如果在之后的页面中还存在type和name相同的输入框，比如修改密码或者新建用户时，浏览器会自动填充表单，这并不是我们想要的效果。解决这个问题有以下几个办法： 在我们真正想要输入的input前创建一个不显示且type等于password与和真正密码输入框同样name的input 这样浏览器填充的密码就填充在了不显示的输入框内。 使用autocomplete="new...
解决elementUI的el-input密码框自动填充禁用失败解决方案
ta_huang的博客
09-14 5103
在el-input中设置属性autocomplete=”off",普通文本可以生效，但是密码框点击后还是会提示用户信息，由于用户信息提示只跟input有关，因此，我们可以通过监听input的行为来,不然其显示，根据测试，在鼠标按下的时候，就会展示用户信息自动填充框供选择，因此，监听的事件要在按下鼠标的时候，即。事件,在input获得焦点时，先失去焦点，就不会提示用户信息，然后再通过js代码去获取焦点，此时不会触发用户信息框。禁用登录的时候提示用户信息，即不允许保存账号密码。
Vue+element 解决浏览器自动填充记住的账号密码问题
12-10
我们在做form表单的时候,会发现,浏览器会自动的将我们之前保存的密码,自动的填充到表单中input 为 type="password" 的框中 登录页面也就算了,但是注册页面就很难受了,有一种不受控制的感觉 不行,我的代码必须由我...
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
10-17
特别需要注意的是，在`<el-form>`中，`model`属性用于绑定表单的数据对象，这里应该避免使用`'form'`这样的静态字符串，因为这可能会与Element UI框架中保留的变量发生冲突，导致界面不显示。正确的做法是将数据对象...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
这可以通过`editFormRules`定义的规则进行，Element UI的`el-form`组件会自动处理这些规则。 综上所述，Vue.js结合Element UI实现的这个示例展示了如何利用组件化的方式构建一个可编辑的表格，包括数据绑定、事件...
el-input去掉自动填充
weixin_43671128的博客
03-27 374
el-input去掉自动填充用户名密码
解决elementUI 表单输入框浏览器自动填写问题
Mitchell1696的博客
04-18 2806
一般来说，输入表单、提交之后，浏览器会保存表单内容，刷新页面之后对应表单内容会自动填充。这个机制可以说是有利有弊，好的是如果经常登录同一个平台，自动填充账号密码显然可以提高效率；但如果是在注册这种场景下，每一次输入表单的内容都不相同，自动填充功能会严重影响我们的使用体验。
前端用户名密码输入框会被浏览器自动填充
qq_39559488的博客
05-08 702
可以在表单或表单字段上添加 autocomplete 属性，并将其值设置为 off 或 new-password。注意：autocomplete=“off” 可能在某些浏览器上不生效，因为它已经被废弃。可以使用 JavaScript 在页面加载时禁用自动填充。可以为表单字段添加随机名称，以避免浏览器自动填充。每次加载表单时，都可以生成一个新的随机名称。
终极解决版 element-ui input=password 在浏览器会自动填充密码的问题
weixin_44999420的博客
05-20 2862
写项目时发现, 在注册用户界面时, 之前浏览器记住的账号被自动填充了, 并且因为公司项目有做密码的显示隐藏功能, 然后用户就能直接看到密码了, 这肯定不行. 超级大的问题. 于是就是百度了一圈. 发现目前现在看到的解决方案有几种(下面做了归纳), 但是都无法解决我的问题: 1.设置 autocomplete属性； ```js <el-input type="password" v-model="form.checkPass" auto-complete="n...
完美解决 element-ui input=password 在浏览器会自动填充已保存的账号密码的问题（自验证通过）
wuxiaoying888的博客
03-23 3064
转载：https://www.jianshu.com/p/5055fda5bfbb <el-form-item label="用户名" prop="user_name"> <el-input v-model="info.user_name" :disabled="updateFlag" auto-complete="off" name="person.user.user_name"></el-input> </el-form-item&g
Vue禁止浏览器自动填充
RequesToGod的博客
01-07 2699
如何禁止谷歌浏览器自动填充密码 这里以elementUI为例： 有给input加autocomplete="off"的 <el-form-item label="原密码：" prop="oldCode"> <el-input v-model="form.oldCode" placeholder="请输入原密码" autocomplete="off" clearable></el-input> </el-form-i
vue禁止谷歌浏览器，360浏览器自动填充form表单
小史同学的博客
05-05 2029
网上的答案五花八门，但是我试了好多都不能用 下面这个方法亲测有用 ········<el-form ref="tipform" :model="addUserInfo" :rules="rules" :label-width="dialog.formLabelWidth"> &lt...
el-form 组织浏览器自动填充
01-17
### el-form 组件与浏览器自动填充兼容性解决方案 当处理 `el-form` 和浏览器自动填充之间的兼容性问题时，主要挑战在于防止浏览器默认的表单字段预填行为干扰用户体验。一种常见的方式是在页面加载完成后立即清除这些值并阻止其再次被填充。 对于 Element UI 的 `<el-input>` 组件来说，可以通过特定属性来控制这一过程： - 使用 `autocomplete="new-password"` 属性可以帮助减少某些现代浏览器对输入框的记忆功能影响[^1]。 ```html <el-input autocomplete="new-password"></el-input> ``` 另外，在实际项目开发过程中还可以考虑采用如下策略之一或组合使用多种方式来增强兼容性和用户体验: #### 方法一：动态改变 name 或 id 属性 通过 JavaScript 动态修改表单项的名字或者 ID 可以有效避免浏览器识别到相同的登录凭证从而触发自动填写机制。 ```javascript document.addEventListener('DOMContentLoaded', function() { var inputs = document.querySelectorAll('.no-autofill input'); Array.prototype.forEach.call(inputs, function(input) { input.setAttribute('name', Math.random().toString(36).substr(2)); }); }); ``` 这种方法适用于不想让用户看到任何提示信息的情况，并且不会破坏原有的 HTML 结构。 #### 方法二：利用 formKey 技巧 创建一个隐藏域用于存储随机字符串作为每次请求唯一标识符(form key)，并将此键附加给所有需要保护免受自动完成影响的字段上。 ```html <input type="hidden" name="__form_key__" value="{{ generateRandomString }}"> <!-- ... --> <el-input :key="'username-' + __form_key__"></el-input> ``` 这种方式不仅能够很好地应对大多数主流浏览器的行为模式，同时也保持了良好的可维护性。 #### 方法三：自定义样式覆盖 如果上述两种技术手段仍无法完全解决问题，则可以尝试借助 CSS 来调整视觉呈现效果，使得即使发生了不期望的数据填充也不会暴露敏感资料。 ```css .no-autocomplete:-webkit-autofill, .no-autocomplete:-moz-autofill, .no-autocomplete:-ms-autofill { background-color: transparent !important; } ``` 以上三种方法均能在不同程度上改善由浏览器自带特性带来的不便之处，具体选择取决于应用场景和个人偏好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值