vue解决ios输入框键盘弹起后无法恢复

 

问题原因：键盘弹起后整个的body视图也被弹起，收起后无法恢复

解决方案：
html:  监听blur 事件 
在vue中可以挂在到prototype上，直接在所需要的输入框通过@blur="fixBlur"使用; 或者写在mixins中
 
以下是vue的写法
 1 fixBlur() {
 2 　　//元素下边框与视窗底部齐平，不传参则表示元素上边框与视窗顶部齐平
 3 　　if(this.isIphone()){
 4 　　　　document.body.scrollTop = 0
 5 　　　　document.body.scrollIntoView()
 6 　　}
 7 },
 8 isIphone() {   // 需要判断是否为ios
 9 　　let u = navigator.userAgent
10 　　return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
11 }

 

posted @ 2021-07-13 09:46  Rakan~  阅读(347)  评论(0)  编辑  收藏  举报