『uniapp』去除手机系统的账号密码自动填充效果搜集整合多管齐下（详细图文注释）

本文链接：https://blog.csdn.net/u011027547/article/details/143844405

问题效果

在这里插入图片描述
其实哪怕是网易云也有这个问题

原因分析

手机浏览器的自动填充功能,大体上根据input标签的如下属性
type=“text” name=“email” autocomplete=“email” 识别保存的.

h5和网页可以用设置背景颜色

-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important; -webkit-box-shadow: 0 0 1000px white inset !important; }

但是在app上,讲道理这个兼容性比较难做,而且也没有必要,所以很多大厂的app也是不会去修改这个的,但是我们的产品经理一定要修改.

我暂时没有找到在uniapp上修改这个填充的背景颜色的方法,因为竞品app是禁用了这个自动填充解决的问题.

1. 设置不显示的input,让浏览器识别到隐藏的input(解决)

我用这个方法成功去除了email,原理就是自动填充只会填充首个字段,我想办法让email的自动填充让用户点不到就行了

            <input type="text" style="display:none">
            <input type="email" style="display:none">
            <input type="password" style="display:none">

2. 设置css,禁止样式(没用)

不知道有没有用

	input:-webkit-autofill,

	input:-webkit-autofill:hover,

	input:-webkit-autofill:focus {

		-webkit-text-fill-color: #000;

		transition: background-color 5000s ease-in-out 0s;

	}

	input {

		-webkit-appearance: none;

		-moz-appearance: none;

		-o-appearance: none;

		appearance: none;

	}

3. 修改type让浏览器识别不到(放弃,这会导致输入一个字就输入法隐藏一下)

也试过用v-if v-show同样不行

本来最完美的解决方法是,直接重写input,用的type是text,不用什么password的密码,这样浏览器就识别不到了
但是这样有些ui框架组件比如说uview就用不了,这里我采用的是动态设置type的方法.
因为本质上自动填充要求有内容了才会启用,那我的思路就是没有内容的时候是text的type,有内容是password
这样既能用到uview的组件,又能避免出现自动填充

修改前

<u-input v-model.trim="password"  type="password"/>

修改后

<u-input v-model.trim="password"  :type="password ?  'password' : 'text'" />

4. 网上最多的说法autocomplete(没用)

			<input type="email" autocomplete="off" style='width:0;height:0;min-height:0' />
			<input type="password" autocomplete="new-password" style='width:0;height:0;min-height:0' />
			<input type="text" autocomplete="new-password" style='width:0;height:0;min-height:0' />