浏览器自动填充但是数据为空的问题

news2024/11/24 10:41:24

问题背景

公司项目中登录页为了方便,需要允许浏览器自动填充账号密码。这个在很多项目都很常见,但是测试中出现了这样一个问题:视觉上已经自动填充账号密码,

但是当点击密码的小眼睛或者点击登录时,会清空掉填充的数据,后面经排查、测试发现只要失焦时就会清空。

排查思路

1、确定下来是首次进入自动填充输入框时,已经给表单赋值了,只是失焦的时候表单被清空,还是一直就只是视图填充,实际并未把数据绑定到表单上。

基于这个想法,给表单加了监听,发现虽然看着已经填充数据了,但是表单上的数据一直为空,后面失焦,输入框清空,表单数据也并未变化过。结合多次验证,认为是浏览器自动填充账号密码,导致首次vue双向绑定失效,失焦时,loginForm数据为空,从而出现输入框清空的现象。

2、梳理原因后,想着既然能看到输入框input的数据,那么理论上就可以获取到元素的value值。双向绑定失效,那就在合适的时机手动赋值。

实现逻辑:失焦时可以判断一下表单数据是否为空,如果为空,就去获取input框的值,获取到的如果不是空值,就可以认为数据首次未绑定成功,此时把获取到的value值手动赋给表单,这样,失焦时,由于表单有数据,输入框不会出现清空现象,而且视图和表单的数据均有值,就可以解决该问题。

代码实现

(1)给用户名和密码输入框都绑定一个失焦事件userNameOnBlur,只要触发失焦,比如点了空白区域,点了登录按钮等,就去判断一下表单的两个数据是否为空,

(2)如果为空,就需要去读取一下填充到输入框上的数据,手动赋值给表单。

$refs:是 ref 的集合,集合里面包含了当前.vue中的所有 ref,用于获取普通元素中的 DOM 以及 子组件中方法/参数等;

$el:用于获取组件内 DOM(包括子组件,当前.vue组件,以及父组件)。

注意:

这里需要$refs和$el结合才能获取到元素,从而拿到value值。通常获取元素dom我们只需要$refs.xxx即可,但是由于这里用的不是原生input标签,而是iView组件库的input组件,组件本身不是DOM,所以需要.$el的帮助才能提取到组件的DOM。

总结

该问题也不是什么很难解的问题,主要是记录一下排查问题的过程,也和大家分享一下排查思路。当然,如果遇到类似的问题,也有一个方向可以参考。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/589178.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

火爆全网,性能测试-全链路压测实战总结,从需求到实战...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 流程导图 梳理阶段…

SpringBoot+Vue 的家政服务管理平台+数据库(附源码)

文章目录 1. 背景2.主要技术3. 可行性分析4.系统设计5系统的详细设计与实现5.1前台模块设计5.2后台功能模块 源码下载地址 1. 背景 本系统主要是设计出家政服务管理平台,基于B/S构架,后台数据库采用了Mysql,可以使数据的查询和存储变得更加有…

Linux函数库管理

文章目录 Linux函数库管理动态与静态函数库静态函数库动态函数库 ldconfig与 /etc/ld.so.confldconfig使用案例 程序的动态函数库解析:lddldd使用案例 校验软件的正确性常见的校验软件有哪些?使用案例 Linux函数库管理 在 Linux 操作系统中,…

【算法竞赛进阶指南】141.周期 题解 KMP 最小循环节

题目描述 一个字符串的前缀是从第一个字符开始的连续若干个字符,例如 abaab 共有 5 5 5 个前缀,分别是 a,ab,aba,abaa,abaab。 我们希望知道一个 N N N 位字符串 S S S 的前缀是否具有循环节。 换言之…

7.Ansible Modules介绍

什么是Ansible Modules? Ansible模块根据其功能分为不同的组,每个模块提供了一些功能,可以直接使用。 模块官方文档: https://docs.ansible.com/ansible/2.9/modules/modules_by_category.html 系统模块是要在系统级别执行的操作,例如修改系统上的用户…

Springboot +spring security,认证方式---Form表单认证的实现(三)

一.简介 这篇文章来学习下security的认证方式其中的Form表单认证 二.Spring Security的认证方式 2.1什么是认证 认证: 就是用来判断系统中是否存在某用户,并判断该用户的身份是否合法的过程,解决的其实是用户登录的问题。认证的存在,是为…

Spring Boot 如何实现异步消息处理

Spring Boot异步消息处理 在现代应用程序中,异步消息处理是一项至关重要的任务。它可以提高应用程序的性能、可伸缩性和可靠性,同时也可以提供更好的用户体验。Spring Boot提供了多种方式来实现异步消息处理,包括使用Spring AMQP、Spring Ka…

【斯歌X捷普】优秀体验官活动:全民开发的样板企业是这样炼成的

3月22日,上海斯歌与捷普共同举办了一场别出心裁的活动——“产品优秀体验官”颁奖典礼,以表彰对业务流程开发做出突出贡献的捷普员工。值得注意的是,获奖的14名流程开发人员中,有7人并非是专业的IT人员,而是来自业务岗…

搜索引擎变天了!谷歌宣布开放「生成式搜索平台」!AI 大模型颠覆搜索体验

作者 | 小戏、兔子酱 搜索引擎,可能真的要变天了! Google 终于要迎来它 25 年来最大的改变,谷歌宣布了开始内测开放【生成式搜索平台(Search Generative Experience,SGE)】,并逐步舍弃那些甚至是…

Linux中与中断相关的内核数据结构

【摘要】本文树妖详细讲解了Linux中与中断相关的内核数据结构及其内部联系。 八、中断相关的数据结构 8.1 irq_desc 用于表示IRQ描述符的结构定义如下:\linux-2.6.32.63\include\linux\irq.h struct irq_desc {unsigned int irq; //中断号unsigned int …

ipad可以使用其他品牌的手写笔吗?2023年电容笔推荐

现在,人们的生活越来越智能化,有些人已经用平板电脑取代了传统的笔记本。我发现用ipad不管是用来画画还是做笔记非常方便,但是苹果Pencil对于大多数人来说都是昂贵的。据我所知,如果仅仅是为了记录,而不是为了画画的话…

他是98年的卷王,我真的玩不过他····

现在的小年轻真的卷得过分了。前段时间我们公司来了个98年的,工作没两年,跳槽到我们公司起薪18K,都快接近我了。后来才知道人家是个卷王,从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天,原来这位小老弟家里…

PKI 基础知识

摘要 本白皮书介绍了加密和公钥基本结构(PKI)的概念和使用 Microsoft Windows 2000 Server 操作系统中的证书服务的基础知识。如果您还不熟悉加密和公钥技术,先阅读本白皮书将有助于理解 Windows 2000 Web 站点上有关这些主题的其它技术白皮书。 引言 Microsoft …

玩转VLAN间路由,教你3个好方法

我的网工朋友大家好啊 在现实网络中,经常会遇到需要跨VLAN相互访问的情况。 很多网工通常会选择一些方法,来实现不同VLAN间主机的相互访问,例如单臂路由。 但是,单臂路由技术中由于存在一些局限性,比如带宽、转发效…

NodeJS基础到入门EXPS⑥

文章目录 ✨文章有误请指正,如果觉得对你有用,请点三连一波,蟹蟹支持😘前言Express框架 Router路由NEST 方法路由端点使用回调函数数组处理路由使用混合使用函数和函数数组处理路由中间件的分类及用法 1、应用级中间件 2、路…

使用 python 制作自动填写问卷星问卷调查程序

目录 前言环境:代码展示尾语 💝 前言 嗨喽~大家好呀,这里是魔王呐 ❤ ~! 你的问卷星任务还没做完吗?今天教你如何快速把问卷星调查任务给完成。 环境: anaconda5.2.0(python3.6.8) 编辑器: p…

ASEMI代理KY可控硅BT169的工作原理及应用领域

编辑-Z 本文主要介绍了可控硅BT169的工作原理及其在各个领域的用。首先,我们将详细阐述可控硅BT169的工作原理,包括结构特点、工作过程等;其次,我们将探讨可控硅BT169在家用电器、工业控制、电力电子等领域的应用。 1、可控硅BT1…

RSA加密 多线程读写不安全

转自:(一场开源 RSA 库引发的“血案”) 导读 RSA 加密算法是一种非对称加密算法,该算法极为可靠,在现有技术条件下,很难破解,因此在软件开发中被广泛使用。你不必担心,本文不会介绍…

如何Debug调试Android程序

当开发过程中遇到一些奇怪的bug,但又迟迟定位不出来原因是什么的时候,最好的解决办法就是调试了。调试允许我们逐行地执行代码,并可以实时观察内存中的数据,从而能够比较轻易地查出问题的原因。总结一下使用Android Studio来调试A…

又双叒添新证书:上海斯歌通过ISO9001和ISO27001认证

近期,上海斯歌顺利通过权威机构审查,正式成为ISO9001质量管理体系和ISO27001信息管理安全体系双重认证企业。 可以说ISO9001及ISO27001的认证,既是斯歌坚持管理标准化、程序化、规范化的成果;也是国际标准化组织(ISO&a…