在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>