解决 - 移动端(H5) ios 在点击input输入框,弹起软键盘后,顶部输入框失效的问题

问题:
在项目开发过程中发现这个问题,在安卓下是正常的,ios固定定位就会失效,在网上看了许多ios兼容的博客,都没有效果,卡了很久,
ios 的软键盘弹出后,会把页面撑高.他就不在原来的位置定位了
后面同事提了个思路,当我点击搜索框的时候,会弹出软键盘,往上滑的话,搜索框也会跟着滑走,那我们就在滑动上做文章.往上滑的时候(或者点击屏幕的时候) 让软键盘消失就ok了,那么页面就不会被撑高了

vue开发代码

mounted () {
    document.body.addEventListener('touchstart',function () {
        document.getElementsByClassName('van-field__control')[0].blur()
      }, { passive: false })
  },

这里是用有赞的vant组件库开发的,里面的van-field__contro是组件 < van-search >

原理: 搜索框的焦点事件
focus(): 会弹出软键盘
blur():软键盘会消失

通过监听触摸事件 touchstart (触摸开始，多点触控) 或者 touchmove (接触点改变，滑动时)
来让焦点消失,从而达到让软键盘消失

求点赞,评论,收藏,关注