在APP中ios输入账号和密码时键盘闪烁

在APP中 ios手机 用户打开默认的自动识别密码,会出现调起键盘输入密码时 键盘一直闪烁的bug

解决方法:1用户在ios系统的设置中 自己关闭自动识别密码 (这种问题建议还是开发解决吧,用户体验不好,,,)

第二种解决方法:

下面以vant组件使用为例

这是一个登陆页 一开始这样写就  用户打开默认的自动识别密码,会出现调起键盘输入密码时 键盘一直闪烁的bug

<section class="login-bar">
  <div class="login-input van-hairline--bottom">
    <van-field v-model="phone" type="tel" clearable maxlength="11" placeholder="请输入您的ID或手机号" :border="false"
      size="large"  autocomplete="off" />
  </div>
  <div class="login-input van-hairline--bottom">
    <van-field class="p-input" v-model="password" maxlength="16" :type="inputType" clearable placeholder="请输入您的密码"
      :border="false" size="large"  autocomplete="off"/>
  </div>
</section>

解决方法就是 在第一个输入框也就是输入手机号的输入框下面加一个输入框并隐藏  在输入密码的输入框上方加一个输入框隐藏 即可解决

给类名hide-input   加上样式:  这样即可

.hide-input {
  width:0;
  opacity:0;
}
<section class="login-bar">
  <div class="login-input van-hairline--bottom">
    <van-field v-model="phone" type="tel" clearable maxlength="11" placeholder="请输入您的ID或手机号" :border="false"
      size="large"  autocomplete="off" />
      // 下方添加输入框
    <van-field v-model="phone" type="tel" clearable maxlength="11" placeholder="请输入您的ID或手机号" :border="false"
    size="large"  autocomplete="off"  class="hide-input"/>
  </div>
  <div class="login-input van-hairline--bottom">
  //上方添加输入框
    <van-field class="hide-input" style="display:none" v-model="password" maxlength="16" :type="inputType" clearable placeholder="请输入您的密码"
      :border="false" size="large"  autocomplete="off" />
    <van-field class="p-input" v-model="password" maxlength="16" :type="inputType" clearable placeholder="请输入您的密码"
      :border="false" size="large"  autocomplete="off"/>
  </div>
</section>

 

posted @ 2020-06-17 10:47  无所谓。。。  阅读(2318)  评论(1编辑  收藏  举报