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>

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

相关推荐
崔庆才丨静觅10 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby606111 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了11 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅11 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅12 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
未来侦察班12 小时前
一晃13年过去了,苹果的Airdrop依然很坚挺。
macos·ios·苹果vision pro
崔庆才丨静觅12 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment12 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅12 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊12 小时前
jwt介绍
前端