uniapp开发的小程序输入框在ios自动填充密码,如何欺骗苹果手机不让自动填充

1:业务场景:开发的小程序有修改密码功能,测试的手机和在微信开发者工具模拟器上都是好好的,但是忽然发现在ios下小程序的第一个密码输入框会自动填充密码,特别不友好。

也使用了常见阻止input输入框自动填充的属性,也将这些属性组合使用,但是依旧没有效果。

常见的解决方法:

1: 使用autocomplete属性

为输入框添加autocomplete属性可以帮助iOS浏览器更好地识别输入框的用途,从而更准确地提供自动填充功能。例如:

javascript 复制代码
<input type="text" placeholder="用户名" autocomplete="username" />
<input type="password" placeholder="密码" autocomplete="current-password" />

2: 禁用自动填充

如果你不希望iOS自动填充任何信息,可以尝试将autocomplete属性设置为offnew-password(仅对密码字段)。例如:

javascript 复制代码
<input type="text" placeholder="用户名" autocomplete="off" />

<input type="password" placeholder="密码" autocomplete="new-password" />

后来查看原来ios系统很有个性,有自己的想法,通过测试发现,在账号框不为空,密码框不为空,两者都不为空,并且光标离开账号框或者密码框的时候,苹果系统会自 动提示存储密码或者更新密码的提示。又经过大量测试发现,账号输入框只是指的距离密码输入框最近的上一个输入框,因此解决办法 就是在密码输入框上面增加一个账号输入框,让他永远为空,并且不可见即可【页面不可见,不能是display:none) 最终解决办法:

javascript 复制代码
<u-form :model="form" ref="uForm" :label-width="200" :label-style="{'color':'#333','font-size': '36rpx',}"
					autocomplete="off">
					<u-form-item label="输入新密码" required>
						<input type="text" v-model="value" style="width: 1px;min-height: 1px; height: 1px;overflow: hidden; "
							auto-complete="current-password"></input>
						<u-input auto-complete="new-password" maxlength="20" type="password" v-model="form.newPassword"
							placeholder="输入新密码" :readonly="isReadonly" @focus="handleFocus" id="passwordThree" />
					</u-form-item>
					<u-form-item label="确认新密码" required :border-bottom="false">
						<input type="text" v-model="value" style="width: 1px;min-height: 1px; height: 1px;overflow: hidden; "
							auto-complete="current-password"></input>
						<u-input id="passwordFour" maxlength="20" auto-complete="new-password" type="password"
							v-model="confirmPassword" :readonly="isReadonly1" @focus="handleFocus1" placeholder="确认新密码"
							@blur="changePassword" />
					</u-form-item>
				</u-form>

亲测有效,有遇到同样问题的小伙伴可以试一下,如果有其他的好办法,也可以评论区分享给我哟,有什么问题咱们可以一起交流一下哟

相关推荐
Jackson__几秒前
高效 AI 对话:如何写出更好的 Prompt
前端
典学长编程4 分钟前
前端开发(HTML,CSS,VUE,JS)从入门到精通!第三天(JavaScript)
前端·javascript·css·html·前端开发
德育处主任10 分钟前
p5.js 用 beginGeometry () 和 endGeometry () 打造自定义 3D 模型
前端·前端框架·canvas
文火冰糖的硅基工坊21 分钟前
[硬件电路-124]:模拟电路 - 信号处理电路 - 测量系统的前端电路详解
前端·嵌入式硬件·fpga开发·架构·信号处理·电路
归辞...40 分钟前
「iOS」————weak底层原理
macos·ios·cocoa
染指11101 小时前
8.苹果ios逆向-安装frida
ios·ios逆向·frida·ios抓包·苹果抓包环境
爷_1 小时前
手把手教程:用腾讯云新平台搞定专属开发环境,永久免费薅羊毛!
前端·后端·架构
狂炫一碗大米饭1 小时前
如何在 Git 中检出远程分支
前端·git·github
东风西巷2 小时前
猫眼浏览器:简约安全的 Chrome 内核增强版浏览器
前端·chrome·安全·电脑·软件需求
太阳伞下的阿呆2 小时前
npm安装下载慢问题
前端·npm·node.js