当前位置: 首页 > news >正文

IOS上微信小程序密码框光标离开提示存储密码解决方案

问题:

ios密码框输入密码光标离开之后会提示存储密码的弹窗
在这里插入图片描述

解决方案

1、在苹果手机上面把 “自动填充密码”关闭,但是苹果这个默认开启,而且大部分客户也不会去自己关闭。

2、欺骗苹果手机,代码实现。
先说解决思路,通过测试发现,在账号框不为空,密码框不为空,两者都不为空,并且光标离开账号框或者密码框的时候,苹果系统会自动提示存储密码或者更新密码的提示。又经过大量测试发现,账号输入框是指的距离密码输入框最近的上一个输入框,因此解决办法就是在密码输入框上面增加一个账号输入框,让他永远为空,并且不可见即可(页面不可见,不能是display:none)。

这样距离密码框最近的上一个文本框永远是空的,就不会触发ios的存储密码提示了。
代码如下:

		<view class="form-box"><view class="item"><text class="title">账号</text><input class="input" placeholder="请输入账号" :value="username" @input="inputName" placeholder-style="font-size:28rpx;color:#c2c2c7" /></view><!-- 内容永远为空 --><view><input disabled="true" value="" ></input></view><view class="item"><text class="title">密码</text><view class="input-box"><input class="input" id="password" @input="inputPassword" placeholder="请输入密码" :password="!showPassword"placeholder-style="font-size:28rpx;color:#c2c2c7" /><view class="eye-box" @click="changeEyeStatus()" v-if="password"><img :src="showPassword?openEye:closeEye" class="icon"></view></view></view><view class="login-btn" @click="login"><text>登录</text></view><view class="check_code" @click="checkCode"><text >短信验证登录</text></view></view>

密码输入框上面的一个输入框 value值永远为空,这样就不会触发储存密码的弹窗啦~

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 在 Markdown 编辑器中插入 空格 Space 和 空行 Enter
  • 使用uni-app和Golang开发影音类小程序
  • js 请求blob:https:// 图片
  • ES 慢上游响应问题优化在用户体验场景中的实践
  • Redis服务器统计和配置信息简介
  • 用python识别二维码(python实例二十三)
  • Python-数据爬取(爬虫)
  • vue实现a-model弹窗拖拽移动
  • Power BI 工具介绍
  • 使用GPT-4和ChatGPT构建应用项目
  • 【Redis】复制(Replica)
  • 解决elementUI列表的疑难杂症,排序显示错乱的问题
  • Objective-C 自定义渐变色Slider
  • 数据结构(3.9_1)——特殊矩阵的压缩存储
  • 解决打印PDF文本不清楚的处理办法
  • 【React系列】如何构建React应用程序
  • 【跃迁之路】【641天】程序员高效学习方法论探索系列(实验阶段398-2018.11.14)...
  • 5、React组件事件详解
  • CSS3 变换
  • Hibernate【inverse和cascade属性】知识要点
  • javascript面向对象之创建对象
  • JS题目及答案整理
  • Laravel 菜鸟晋级之路
  • log4j2输出到kafka
  • mac修复ab及siege安装
  • node 版本过低
  • spring-boot List转Page
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • underscore源码剖析之整体架构
  • Vue.js 移动端适配之 vw 解决方案
  • Web标准制定过程
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 从零开始的webpack生活-0x009:FilesLoader装载文件
  • 工程优化暨babel升级小记
  • 简单数学运算程序(不定期更新)
  • 两列自适应布局方案整理
  • 前嗅ForeSpider中数据浏览界面介绍
  • 使用 Xcode 的 Target 区分开发和生产环境
  • 问题之ssh中Host key verification failed的解决
  • 我是如何设计 Upload 上传组件的
  • 小程序button引导用户授权
  • 以太坊客户端Geth命令参数详解
  • 智能合约开发环境搭建及Hello World合约
  • # 计算机视觉入门
  • # 利刃出鞘_Tomcat 核心原理解析(八)-- Tomcat 集群
  • (1) caustics\
  • (PWM呼吸灯)合泰开发板HT66F2390-----点灯大师
  • (二)十分简易快速 自己训练样本 opencv级联lbp分类器 车牌识别
  • (附源码)springboot电竞专题网站 毕业设计 641314
  • (附源码)小程序儿童艺术培训机构教育管理小程序 毕业设计 201740
  • (六) ES6 新特性 —— 迭代器(iterator)
  • (切换多语言)vantUI+vue-i18n进行国际化配置及新增没有的语言包
  • (十)c52学习之旅-定时器实验
  • (图文详解)小程序AppID申请以及在Hbuilderx中运行
  • (转)Sql Server 保留几位小数的两种做法