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