处理由于360浏览器自动填充表单导致vue无法绑定表单值

最新推荐文章于 2024-05-20 14:44:52 发布
最新推荐文章于 2024-05-20 14:44:52 发布
阅读量268 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_53191752/article/details/131053955
版权

用户登录 由于选择了浏览器保存密码 导致在下一次登录时由于360浏览器机制原因，在填充之后vue无法获取到填充的值，在登录时候看似是表单填充完毕 ，却登录失败

在这里插入图片描述

解决

获取表单输入框元素 在登录时候进行原生方法获取value值 进行绑定vue的data
在这里插入图片描述

nz__zn
关注
360浏览器自动填充input输入框 vue
donghuzi1
11-17 412
360浏览器自动填充input输入框 vue
浏览器自动填充但是数据为空的问题
Wonder
05-30 2274
实现逻辑：失焦时可以判断一下表单数据是否为空，如果为空，就去获取input框的值，获取到的如果不是空值，就可以认为数据首次未绑定成功，此时把获取到的value值手动赋给表单，这样，失焦时，由于表单有数据，输入框不会出现清空现象，而且视图和表单的数据均有值，就可以解决该问题。基于这个想法，给表单加了监听，发现虽然看着已经填充数据了，但是表单上的数据一直为空，后面失焦，输入框清空，表单数据也并未变化过。该问题也不是什么很难解的问题，主要是记录一下排查问题的过程，也和大家分享一下排查思路。子组件中方法/参数等；
vue+element-ui 登录界面 浏览器自动填充保存的用户名和密码问题 后台管理系统 如何取消浏览器自动填充
————————————————————————————————
12-13 3247
网上一搜如何取消密码自动填充这个问题 大多都是给el-input加auto-complete这个属性 但这个属性某些情况下还是会出现自动填充问题 会很麻烦 不能解决问题 这个时候可以使用input密文显示 将原本type=“password” 改成type=“text” 然后设置css样式 el-input{ -webkit-text-security：指定要使用的形状来代替文字的显示 none 无。 circle 圆圈。 disc 圆形。 square 正方形 } 这时就解决了账号密码自动填充 ..
vue禁止谷歌浏览器，360浏览器自动填充form表单
小史同学的博客
05-05 2024
网上的答案五花八门，但是我试了好多都不能用 下面这个方法亲测有用 ········<el-form ref="tipform" :model="addUserInfo" :rules="rules" :label-width="dialog.formLabelWidth"> &lt...
vue项目谷歌和360解决input自动填充
weixin_44969815的博客
10-24 1450
谷歌浏览器和360浏览器表单input自动填充解决方案 谷歌浏览器相对比较简单 在当前input框或者from表单标签添加autocomplete即可 <input name="password0" type="password" class="text w200" ref="oldPwd" @change="changeOldPwd" autocomplete="off" /&...
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
10-15
在Vue.js应用中，我们经常需要处理添加和编辑数据的功能，而这些操作通常会使用到同一个表单。在本场景中，使用了Element UI库的`el-form`组件来构建表单，它提供了丰富的表单元素和表单验证功能。在实现添加和编辑...
vue仿word表单录入demo
03-28
2. **动态绑定**：Vue.js的双括号`{{ }}`和`v-bind`指令可以实现数据和视图的实时同步，使得用户在表单中的任何改动都能立即反映到界面上。 3. **表单验证**：使用`v-model`与自定义验证规则结合，可以实现表单的...
vue----根据后台返回字段自动生成表单列表.zip
09-29
"静态数据的显示"可能指的是在没有后台数据时，使用预设的静态数据来填充表单，这通常适用于开发阶段或者某些固定的表单字段。而"根据后台返回的字段，对相应的字段进行绑定"则涉及到Vue的计算属性（`computed`）和...
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
10-16
`handleSelect`方法利用了Vue的数据绑定特性，将用户选中的对象的属性值，直接赋值给表单对象`form`的相应属性。 #### 5. mock数据模拟 在实际开发中，服务端的数据往往需要模拟，以便于前端独立开发。文章中提到了...
vue使用iview组件，Chrome浏览器与360浏览器避免表单自动填充方法
时光空间
06-03 1329
浏览器保存密码后，form表单若有type为password的输入框，就会出现表单自动填充密码，并且密码输入框上方临近的输入框会默认自动填充账号，如何避免自动填充嘞。方法如下： 使用autocomplete="off",但经过测试在360浏览器并没有达到效果 在password输入框上方增加一个type为password的和type为text的输入框，将其隐藏 将密码输入框type属性定义为text，点击输入框时再改为password 如果方法2或方法3不行可以结合方法2和3一起用，百分...
vue亲测阻止谷歌360等浏览器默认填充密码都无效
weixin_43086811的博客
12-04 1593
开发项目，并没有保存密码的习惯，后来测试提了bug，搜一搜，网上的方法都无效。 无效方法如下： 1.autocomplete=“off” 2.先将 type="password"改成text，聚焦变password，会有下拉账号密码选项 <input type="text" id="pwd" placeholder="请输入密码" onfocus="this.type='password'"...
vue3 elementPlus 解决密码框自动填充问题
HurryUpp的博客
07-31 2674
【代码】vue3 elementPlus 解决密码框自动填充问题。
表单校验：vue表单校验提示输入内容提示、提示信息未消失
weixin_47659945的博客
06-27 3396
由于vue2 中监听不到对象属性值变化导致子组件没有收到 formLabel 对象属性；问题出现场景： vue 项目主子组件绑定的form对象为父组件传入的对象;子组件没有同步到父组件对应的对象值导致的；将formRules 对象里面对应的key修改与formLabel 对象的key一致就行；日常开发小问题随笔记录，方便后续遇到查阅。
微信公众号之IOS12以上版本自动填充验证码的输入框无法获取填充值
lwfcomeon的博客
02-21 1502
用的vue+vant 写的登录页 就两项 手机号 验证码，但是IOS自动填充成功完验证码之后，验证码框一旦失去焦点，值就不见了。也不能通过v-model拿到值。至今不知道因为什么，有大佬知道可以告诉我一下，但我解决了。 我看网友们都是自动填充两遍怎么办，没人问填充完了失去焦点值没了怎么办…… 1 把van-field换成原生input标签（样式改改就好了嘛） 2 因为换成input之后不能用v-model直接拿输入框值了，在下不才，用了jquery，当然 你也可以onchange监听值。反正拿到就行了。嘻嘻
解决360浏览器登录页账号密码自动填充el-input获取不到值的问题
aaa1111111q的博客
12-14 451
在登录页上记住账号和密码并且自动填充是个很方便的功能，但是在项目过程中，发现填充后的值el-input未进行双向绑定，在获取验证码时获取不到填充的值。添加el-input框失焦事件，在失去焦点的时候，重新获取并且绑定值。
VUE3 SEO解决方案 后记（已被百度、Bing收录）
最新发布
xiaomai919的博客
05-20 1110
但实际上用Bing去做 URL检查 时，会提示有没有H1标题，没有网页内容等严重错误。上一篇写到 直接 index.html 中修改了 title、keywords等内容。虽然被收录了，但是这种方法只能让机器人收录一张页面，如果是网站是多页面的话就不行了。另外网页内容更新后，需要手动去更新index_s.html这个文件，比较麻烦。用nginx把所有爬虫机器人重定向到一个包含完整网页的静态页面上。nginx配置(将爬虫重定向到index_s.html上)等了两三周后终于被Bing收录了。
vue开发网站seo优化方法，最新版
ccc6553584的博客
03-28 4057
面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】96道前端面试题：常用算法面试题：内容主要包括HTML，CSS，JavaScript，浏览器，性能优化端面试题：**
禁用 Vue 自动填充功能
YOLO_CODE的博客
09-22 780
在 Vue.js 中，有时我们可能希望禁用浏览器的自动填充功能，特别是在涉及敏感信息的表单中。本文将介绍如何在 Vue 应用中禁用自动填充功能，并提供相应的源代码示例。属性的方式，来禁用 Vue 应用中的自动填充功能。除了样式设置外，我们还可以使用 HTML 属性来禁用自动填充。首先，我们可以通过添加自定义样式来阻止浏览器自动填充表单字段。将上述样式添加到你的 CSS 文件中，或者在 Vue 组件的。如果你正在使用 Vue 组件，可以通过在组件的模板中设置。在上述示例中，通过在表单元素的模板中设置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值