iOS微信小程序存储密码弹窗关闭后点击失效？一招搞定！

场景还原

ios密码输入框输入后系统弹出存储密码弹窗，关闭弹窗页面所有内容第一次点击无效

标题问题描述

在iOS系统的微信小程序中，用户输入账号和密码后，系统会弹出“存储密码”的提示弹窗。当用户关闭弹窗后，页面上的按钮（如登录按钮）第一次点击会失效，需要第二次点击才能触发事件。这种现象严重影响了用户体验，尤其是在登录场景中，可能导致用户误以为小程序存在故障。

问题原因

该问题的根本原因是iOS系统的“自动填充密码”功能。当用户输入密码并关闭弹窗后，系统会短暂锁定页面焦点，导致第一次点击事件无法正常触发。
解决方案

1. 增加隐藏的输入框

通过在小程序的账号和密码输入框之间增加一个隐藏的输入框，可以欺骗iOS系统，避免触发“存储密码”的弹窗。具体实现如下：

在密码输入框上方添加一个不可见的输入框，确保其值为空且不可见（不能使用display:none，否则无效）。

代码示例：

<view style="width: 1rpx; height: 1rpx; overflow: hidden;">
  <input type="text" disabled value="" />
</view>
<view class="item">
  <text class="title">密码</text>
  <input type="password" placeholder="请输入密码" />
</view>

2. 动态调整页面布局

• 在弹窗关闭后，动态调整页面布局，强制页面重新渲染，以恢复按钮的点击事件。例如：

• 在弹窗关闭时，通过修改页面样式（如position: fixed）来触发页面重绘。

代码示例：

Page({
  data: {
    isShowConfirm: false
  },
  hideShowConfirm() {
    this.setData({
      isShowConfirm: false
    });
    // 强制页面重绘
    wx.nextTick(() => {
      this.setData({});
    });
  }
});

这种方法可以解决弹窗关闭后点击失效的问题。

3. 禁用自动填充功能

通过设置输入框的autocomplete="off"属性，可以禁用iOS系统的自动填充功能。虽然这种方法在某些情况下可能无效，但仍值得尝试：

<input type="password" placeholder="请输入密码" autocomplete="off" />

这种方法适用于简单的场景，但可能无法完全解决问题。

4. 监听输入框事件

通过监听输入框的@input或@blur事件，手动更新绑定的数据，确保密码框的值能够正确传递：

代码示例：

<input type="password" @input="updatePassword" />
methods: {
  updatePassword(event) {
    this.setData({
      password: event.detail.value
    });
  }
}

这种方法可以避免因自动填充导致的数据绑定失效问题。

总结

iOS系统在微信小程序中的“存储密码”弹窗问题，虽然看似简单，却可能引发严重的用户体验问题。通过增加隐藏输入框、动态调整页面布局、禁用自动填充功能或监听输入框事件，开发者可以有效解决这一问题。建议开发者根据具体场景选择最适合的解决方案，确保用户在小程序中的操作流畅无阻。