【学一点儿前端】iOS微信小程序在密码input框中利用系统保存的密码后，密码 ...

遇到问题

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

1. <view class="item-input-warp">
2.     <input
3.         v-model="data.formData.password"
4.         type="password"
5.         placeholder="请输入密码"
6.     />
7. </view>

复制代码

办理过程

实验利用uniapp的@input和@blur

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

在网上查了许多文章，发现许多码友都遇到了这个问题，但是官方一直没有给办理方法，正万念俱灰时，我看到一个极具想法的方法：
因为iOS在页面中只有第一个密码框会提示保存密码和利用密码箱，那我们可以通过在密码框上多加一个用户看不到的密码框，骗过iOS系统，以克制真正的密码框的保存密码功能，从源头办理问题。
代码（注意不能利用display:none，并且假输入框必须在真正密码框邻近的上方，才能骗过iOS系统）：

1. // 诱骗iOS系统，使其不触发下方密码框的保存密码和主动填充，制止v-model不生效问题<view style="position: fixed; height: 1rpx; overflow: hidden; background-color: transparent">    <input type="password" /></view><view class="item-input-warp">
2.     <input
3.         v-model="data.formData.password"
4.         type="password"
5.         placeholder="请输入密码"
6.     />
7. </view>

复制代码

结果

乐成骗过iOS，输入账号后点击密码框不提示利用密码箱密码，并且输入密码后失焦也不提示保存密码了
参考文章

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。