ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。
js 监听ios手机键盘弹起和收起的事件
/* js 监听ios手机键盘弹起和收起的事件 */ document.body.addeventlistener('focusin', () => { //软键盘弹起事件 console.log("键盘弹起"); }); document.body.addeventlistener('focusout', () => { //软键盘关闭事件 console.log("键盘收起"); });
关于ios键盘弹起 body的高度拉长,页面底部空白问题
当输入框失去焦点时,ios手机键盘收起,将滚动条改为0,如下:
$("#phone").on("focusout",function(){ var ua = window.navigator.useragent; if (ua.indexof('iphone') > 0 || ua.indexof('ipad') > 0) { //键盘收起页面空白问题 document.body.scrolltop = 0; document.documentelement.scrolltop=0; } }); $("#code").on("focusout",function(){ var ua = window.navigator.useragent; if (ua.indexof('iphone') > 0 || ua.indexof('ipad') > 0) { //键盘收起页面空白问题 document.body.scrolltop = 0; document.documentelement.scrolltop=0; } });
ios软键盘将页面抵到上面后,关闭软键盘页面不回弹
这个问题有时候会导致弹出框确定按钮失效等一系列问题,
解决办法:失去焦点时将页面滚动到底层,或者最顶部,个人看实际情况滚动到适合位置:
$('input,textarea').on('blur', function () { window.scroll(0, document.body.scrollheight); }); $('select').on('change', function () { window.scroll(0, document.body.scrollheight); });
ios手机大屏幕手机比较容易遇到这个问题。 解决办法:
$("input,textarea,select").blur(function(){ document.body.scrolltop =0; });
解决ios12以上微信内置浏览器下键盘收起底部空白的问题
bug表现:
在ios12以上的系统下,微信打开链接点击输入框获取焦点后虚拟键盘自动弹出,输入内容后收起键盘,原来弹出键盘的位置一片空白,页面没有自动适应整个屏幕。
解决办法:
在公共js文件下对设备进行判断,如果为ios设备则全局处理该问题,即在当前页面滚动的位置上下滚动1px的距离即可实现页面的自适应!
let ua = window.navigator.useragent; let app = window.navigator.appversion; //$alert('浏览器版本: ' + app + '\n' + '用户代理: ' + ua); if (!!ua.match(/\(i[^;]+;( u;)? cpu.+mac os x/)) { //$alert('ios端'); $("input").on("blur", function () { var currentposition, timer; var speed = 1; timer = setinterval(function () { currentposition = document.documentelement.scrolltop || document.body.scrolltop; currentposition -= speed; window.scrollto(0, currentposition);//页面向上滚动 currentposition += speed; window.scrollto(0, currentposition);//页面向下滚动 clearinterval(timer); }, 100); }) } else if (ua.indexof('android') > -1 || ua.indexof('adr') > -1) { //$alert('android端'); }
终极解决方案:
1,在唤起软键盘之前,记录当前页面滚动位置(方便后面恢复位置);
/* 获取窗口滚动条高度 */ function getscrolltop(){ var scrolltop=0; if(document.documentelement&&document.documentelement.scrolltop){ scrolltop=document.documentelement.scrolltop; }else if(document.body){ scrolltop=document.body.scrolltop; } return scrolltop; }; var oldscrolltop = getscrolltop() || 0; // 记录当前滚动位置
2,在软键盘关闭后,ios端再将页面归位;
document.body.addeventlistener('focusin', () => { //软键盘弹起事件 console.log("键盘弹起"); //document.title = "键盘弹起" + $(".weui-dialog").css("position") + cbjs.getscrolltop() + $(".weui-dialog").css("top"); }); document.body.addeventlistener('focusout', () => { //软键盘关闭事件 console.log("键盘收起"); //document.title = "键盘收起" + $(".weui-dialog").css("position") + cbjs.getscrolltop() + $(".weui-dialog").css("top"); var ua = window.navigator.useragent; if (ua.indexof('iphone') > 0 || ua.indexof('ipad') > 0) { //键盘收起页面空白问题 document.body.scrolltop = oldscrolltop; document.documentelement.scrolltop = oldscrolltop; } });
完美解决关于ios键盘弹起 body的高度拉长,页面底部空白问题。ios软键盘将页面抵到上面后,关闭软键盘页面不回弹的问题。
【完】
引用:
【js 监听ios手机键盘弹起和收起的事件】https://www.cnblogs.com/lml-lml/p/10038370.html
【ios软键盘将页面抵到上面后,关闭软键盘页面不回弹】https://www.cnblogs.com/stubborn-donkey/p/10207316.html
【关于ios键盘弹起 body的高度拉长,页面底部空白问题】https://www.jianshu.com/p/e56b5faa7175
【ios移动端软键盘收起后,页面内容留白不下滑】https://blog.csdn.net/a_small_insect/article/details/85162236
【解决ios12以上微信内置浏览器下键盘收起底部空白的问题】https://www.jianshu.com/p/a57946771c4d