【学一点儿前端】iOS微信小程序在密码input框中使用系统保存的密码后,密码v-model绑定值不更新的问题

碰到问题

又双叕碰到阴间bug,这回碰到了一生之敌iOS产生的兼容性问题
在iOS11中,支持密码的快速填充。这让iOS用户在微信小程序进行登录的时候,可以把当前账号密码保存进系统密码箱,之后再次登录时,输入账号后点击密码框,系统自带的键盘有密码箱的选项,选择密码箱的密码后,密码框正常显示密码,但是点击登录按钮后提示“请输入密码”。
在代码校验中,是判断data里的password是否存在,不存在就会提示“请输入密码”,这说明在选择密码箱的密码后,v-model的绑定没有生效。

原代码:

<view class="item-input-warp"><inputv-model="data.formData.password"type="password"placeholder="请输入密码"/>
</view>

解决过程

尝试使用uniapp的@input和@blur

一开始不以为然,因为是uniapp,应该可以用@input函数来监听输入框内值的改变,自己手动更新data.password。然而我发现@input需要在键盘进行按键输入才能触发,因此不符合场景。
于是我再尝试了@blur,发现虽然事先点击了密码框,但是在选择密码箱的密码前,页面已经从密码框失焦了,所以不能直接通过@blur拿到密码(至少用户不知道是怎么回事儿)。

使用看不到的密码框骗过iOS从而做到不让用户保存密码和使用密码箱

在网上查了很多文章,发现很多码友都遇到了这个问题,但是官方一直没有给解决方法,正万念俱灰时,我看到一个极具想法的方法:
因为iOS在页面中只有第一个密码框会提示保存密码和使用密码箱,那我们可以通过在密码框上多加一个用户看不到的密码框,骗过iOS系统,以阻止真正的密码框的保存密码功能,从源头解决问题。

代码(注意不能使用display:none,并且假输入框必须在真正密码框临近的上方,才能骗过iOS系统):

// 欺骗iOS系统,使其不触发下方密码框的保存密码和自动填充,避免v-model不生效问题
<view style="position: fixed; height: 1rpx; overflow: hidden; background-color: transparent"><input type="password" />
</view>
<view class="item-input-warp"><inputv-model="data.formData.password"type="password"placeholder="请输入密码"/>
</view>

结果

成功骗过iOS,输入账号后点击密码框不提示使用密码箱密码,并且输入密码后失焦也不提示保存密码了

参考文章

微信小程序 IOS 端输入框提示存储密码的解决方法

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

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

相关文章

【软件工程】【22.04】p2

关键字&#xff1a; 软件开发分本质及涉及问题、需求规约与项目需求不同、用况图概念包含模型元素及其关系、创建系统的用况模型RUP进行活动、软件生存周期&软件生存周期模型&软件项目过程管理关系、CMMI基本思想 模块结构图&#xff1a;作用域、控制域&#xff1b;语…

【Linux命令】top linux下的任务管理器

一、概述 top命令是Linux下常用的性能分析工具&#xff0c;能够实时显示系统中各个进程的资源占用状况&#xff0c;类似于Windows的任务管理器。top是一个动态显示过程&#xff0c;即可以通过用户按键来不断刷新当前状态。如果在前台执行该命令&#xff0c;它将独占前台&#…

kafka 和Zookeeper 集群架构设计对比分析

kafka 和Zookeeper 集群架构设计对比分析 Kafka 和 Zookeeper 是两个关键的分布式系统组件,它们在集群架构设计上有显著的差异。 下面是对它们在集群架构设计方面的对比分析。 1. Kafka 集群架构设计 1.1 基本架构 Kafka 是一个分布式消息系统,由多个 Broker 组成。每个 …

rust 引用了Trait的实现,为什么还需要引入Trait 才能调用实现的方法

文章目录 1. Rust中结构体实现trait与方法调用的关系2. 要调用trait方法,有几种方式:3. code 1. Rust中结构体实现trait与方法调用的关系 在Rust中,当一个结构体实现了某个trait时,不能直接通过结构体调用trait中定义的方法。这是因为: trait方法不是结构体的固有方法。它们是…

文献阅读(307)AccelWattch

题目&#xff1a;AccelWattch: A Power Modeling Framework for Modern GPUs时间&#xff1a;2021会议&#xff1a;MICRO研究机构&#xff1a;西北大学 本篇论文的主要贡献&#xff1a; 提出了一个GPU功耗模型&#xff0c;考虑了DVFS, thread divergence, intra-warp function…

关于PHP中删除JSON指定元素unset和array_splice的区别

1. unset(mixed $var, mixed ...$vars): void unset 不会改变原有索引顺序 ------------------------- 2. array_splice( array &$array, int $offset, ?int $length null, mixed $replacement [] ): array array_splice 删除后&#xff0c;会重新排序…

小程序人脸分析

公司的业务需求是用户在使用某个功能前&#xff0c;必须使用人脸识别&#xff0c;确保当前使用人是用户本人&#xff0c;防止某些功能乱用。后端用的是腾讯的人脸识别方案&#xff0c;这里只是前端的识别代码&#xff0c;保证人脸剧中&#xff0c;大小合适&#xff0c;有一个人…

四十二、 我国粤港澳大湾区个人信息出境标准合同如何签署和备?

《大湾区标准合同》是注册于&#xff08;适用于组织&#xff09;/位于&#xff08;适用于个人&#xff09;粤港澳大湾区内地部分&#xff0c;或者香港特别行政区的个人信息处理者&#xff08;就内地而言&#xff0c;是指在个人信息处理活动中自主决定处理目的、处理方式的组织、…

4418 HMI 更换logo 图片

逻辑说明&#xff1a; HMI 的 kernel 没有提供源码&#xff0c;只是提供了镜像&#xff0c;如果客户需要更换自己的logo 的话&#xff0c; 可以使用提供的工具&#xff0c;将内核logo 打包起来。 我觉得这里的打包的过程应该是参考了&#xff0c; 4418 build_android.sh 脚…

自然语言处理课程论文

目录 1.背景介绍 1.1 文献介绍 1.2 研究背景 1.3 知识概述 1.3.1 机器翻译 1.3.2 attention机制与self-attention机制 2.数据来源与处理 2.1 数据集描述 2.2 数据处理 3. 模型架构 ​​​​​​​3.1 Positional Embedding ​​​​​​​3.2 Multi-Head Attention ​​​​​…

Go interface{}类型转换

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

华为HCIP Datacom H12-821 卷13

1.多选题 以下关于二层漫游和三层漫游的描述,以下说法正确的是? A、如果 STA 漫游时前后关联的 VLAN ID 相同则一定属于二层漫游 B、二层漫游是指客户端在同一子网内漫游 C、三层漫游是指客户端在不同子网间漫游 D、三层漫游前后 STA 关联的 AP 服务集上的 VL AN 必须相…

awk

1、定义 awk&#xff1a;按行取列 awk的默认分隔符&#xff1a;空格&#xff0c;tab键&#xff0c;有多个空格自动压缩成一个 2、awk的工作原理 根据指定信息逐行的读取文本内容&#xff0c;然后按照条件进行格式化输出 3、awk的选项 -F&#xff1a;指定分割符&#xff0…

SQL Server - ROLLUP、GROUPING、CUBE、GROUPING SET

文章目录 SQL Server - ROLLUP、GROUPING、CUBE、GROUPING SETROLLUP函数GROUPING函数GROUPING SET函数CUBE函数网上例子 写在前面&#xff1a;如果我们想要对分组之后的数据进行类似小计的计算&#xff0c;那么就需要使用到下面的函数 SQL Server - ROLLUP、GROUPING、CUBE、G…

EMANE版本的编译问题

EMANE最新版本编译问题 在Ubuntu 18.04上编译EMANE最新版本 在ubuntu 18.04上使用make deb编译EMANE1.5.1时&#xff0c;会卡在如下地方&#xff1a; make[6]: Entering directory ‘/home/xxx/emane-1.5.1/.debbuild/emane-1.5.1’ /bin/bash /home/xxx/emane-1.5.1/.debbui…

YOLOv10剪枝|模型轻量化实现方案 - 模型剪枝手把手教学

📚 专栏地址:《YOLOv10算法改进实战》 👉 独家改进,对现有YOLOv10进行二次创新,提升检测精度,适合科研创新度十足,强烈推荐 🌟 统一使用 YOLOv10 代码框架,结合不同模块来构建不同的YOLO目标检测模型。 💥 本博客包含大量的改进方式,降低改进难度,改进点包含【B…

互联网IT公司网站选择科技蓝,从来没让人失望过。

选择科技蓝色作为IT官网的主题颜色有以下好处&#xff1a; 专业感&#xff1a;科技蓝色通常与科技、创新和专业相关联&#xff0c;使用科技蓝色可以给访问者一种专业、可靠的印象&#xff0c;增强品牌形象&#xff0c;特别适合IT行业。技术感&#xff1a;科技蓝色给人一种科技…

微信小程序笔记 七!

页面配置 1. 页面配置文件的作用 小程序中&#xff0c;每个页面都有自己的 .json 配置文件&#xff0c;用来对当前页面的窗口外观、页面效果等进行配置。 2. 页面配置和全局配置的关系 小程序中&#xff0c;app.json 中的 window 节点&#xff0c;可以全局配置小程序中每个…

智心顾问:为心智障碍家庭带来温暖与专业支持

&#x1f499;关爱从心开始 —— 理解心智障碍 在这个世界上&#xff0c;有这样一群特殊的群体——心智障碍者。他们通常伴随着个体认知、社会互动和学习能力的障碍。这些障碍可能源于遗传、环境或未知因素&#xff0c;但不应成为他们照护者获得信息和支持的阻碍。心智障碍者的…

「ClickHouse 极简教程」分布式下的 IN/JOIN 及 GLOBAL关键字

百度安全验证https://baijiahao.baidu.com/s?id1712073808973941124&wfrspider&forpc