问题:
在项目开发过程中发现这个问题,在安卓下是正常的,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 (接触点改变，滑动时)
来让焦点消失,从而达到让软键盘消失
求点赞,评论,收藏,关注
