场景

机型:iphone7 - iphonex

微信版本:最新版微信下

页面弹出层中有input框,blur后,滑动页面,其他按钮的点击事件错位。

解决办法

在input唤醒键盘输入后,在input上加入onBlur事件,input失去焦点后,让页面滚动到顶部(document.body.scrollTop = 0 )

  1. <div class="mobile-phone" @click="$refs['input'].focus()">
  2. <input class="input_phone" type="number" ref="input" placeholder="输入手机号" v-model="phoneNumber" @blur="onBlur">
  3. </div>
  4. private onBlur(event: any) {
  5. if (/(Android)/i.test(navigator.userAgent)) {
  6. return
  7. }
  8. if (document.body) {
  9. document.body.scrollTop = 0
  10. }
  11. }

参考文章

https://sevencai.github.io/2019/03/01/%E8%A7%A3%E5%86%B3-IOS-%E5%BE%AE%E4%BF%A1%E6%9F%90%E4%BA%9B%E7%89%88%E6%9C%AC%E4%B8%8B%E9%94%AE%E7%9B%98%E6%94%B6%E8%B5%B7%E9%A1%B5%E9%9D%A2%E4%B8%BA%E4%B8%8B%E7%A7%BB%E5%AF%BC%E8%87%B4%E7%82%B9%E5%87%BB%E4%BA%8B%E4%BB%B6%E5%A4%B1%E6%95%88%E9%97%AE%E9%A2%98/

  1. ;(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => { 'input', 'textarea'].includes(e.target.localName) && document.body.scrollIntoView(false) }, true)