(一)前端h5混合开发手机端ios 当有input输入时,手机下方弹出键盘使页面上移,当输入完成,键盘消失后页面显示回到原位,但实际不能点击(可点击上方区域,有反应),也就是说实际是没有回弹。
解决办法:
给input加blur事件,代码如下:
$('input').on('blur', function () { setTimeout(function(){ var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0; window.scrollTo(0, Math.max(scrollHeight - 1, 0)); }, 100); });
(二)ios键盘唤起,键盘收起以后页面不归位 (vue中)
问题详情描述:
输入内容,软键盘弹出,页面内容整体上移,但是键盘收起,页面内容不下滑
出现原因分析:
固定定位的元素 在元素内 input 框聚焦的时候 弹出的软键盘占位 失去焦点的时候软键盘消失 但是还是占位的 导致input框不能再次输入 在失去焦点的时候给一个事件
解决办法:
<div class="list"> <div class="title"><span>啦啦啦</span></div> <div class="content"> <input class="contentInput" placeholder="你叫啥" v-model="peopleList.name" @focus="changefocus()" @blur.prevent="changeBlur()"/> </div> </div>
changeBlur(){ let u = navigator.userAgent, app = navigator.appVersion; let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isIOS){ setTimeout(() => { const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) }, 200) } }
拓展知识: position: fixed
的元素在ios里,收起键盘的时候会被顶上去,特别是第三方键盘
就OK啦!