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') >  || ua.indexOf('iPad') > ) { //键盘收起页面空白问题

         document.body.scrollTop = ;

          document.documentElement.scrollTop=;

    }

});

$("#code").on("focusout",function(){

    var ua = window.navigator.userAgent;

    if (ua.indexOf('iPhone') >  || ua.indexOf('iPad') > ) { //键盘收起页面空白问题

        document.body.scrollTop = ;

        document.documentElement.scrollTop=;

     }

});

ios软键盘将页面抵到上面后，关闭软键盘页面不回弹
这个问题有时候会导致弹出框确定按钮失效等一系列问题，

解决办法：失去焦点时将页面滚动到底层，或者最顶部，个人看实际情况滚动到适合位置：

$('input,textarea').on('blur', function () {

    window.scroll(, document.body.scrollHeight);

});

$('select').on('change', function () {

    window.scroll(, document.body.scrollHeight);

});

ios手机大屏幕手机比较容易遇到这个问题。 解决办法：

$("input,textarea,select").blur(function(){

    document.body.scrollTop =;

});

解决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 = ;

        timer = setInterval(function () {

            currentPosition = document.documentElement.scrollTop || document.body.scrollTop;

            currentPosition -= speed;

            window.scrollTo(, currentPosition);//页面向上滚动

            currentPosition += speed;

            window.scrollTo(, currentPosition);//页面向下滚动

            clearInterval(timer);

        }, );

    })

} else if (ua.indexOf('Android') > - || ua.indexOf('Adr') > -) {

    //$alert('android端');

}

终极解决方案：

1，在唤起软键盘之前，记录当前页面滚动位置（方便后面恢复位置）；

/* 获取窗口滚动条高度 */

function getScrollTop(){

    var scrollTop=;

    if(document.documentElement&&document.documentElement.scrollTop){

        scrollTop=document.documentElement.scrollTop;

    }else if(document.body){

        scrollTop=document.body.scrollTop;

    }

    return scrollTop;

};

var oldScrollTop = getScrollTop() || ; // 记录当前滚动位置

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') >  || ua.indexOf('iPad') > ) { //键盘收起页面空白问题

        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

ios键盘弹起 body的高度拉长，页面底部空白问题。ios软键盘将页面抵到上面后，关闭软键盘页面不回弹的问题。的更多相关文章

  1. 【Swift】- UITextField完成输入后关闭软键盘的几种方法

    总结了以下几种方式,欢迎补充  1,为空白区域绑定Touch Up Inside事件  2,重写touchesEnded方法  3,为TextField绑定Did End On Exit事件 1,点击 ...

  2. Vue——解决移动端键盘弹起导致的页面fixed定位元素布局错乱

    最近做了一个移动端项目,页面主体是由form表单和底部fixed定位的按钮组成,当用户进行表单输入时,手机软键盘弹起,此时页面的尺寸发生变化,底部fixed定位的元素自然也会上移,可能就会覆盖页面中的 ...

  3. 软键盘 显示隐藏 测量高度 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. 微信公众号页面的web页面键盘弹起问题

    今天开发的过程中,遇到了一个小问题,是这样的,  UI的设计稿中有个底部的按钮是相对于屏幕定位的,但是这个页面还有一个输入框:具体情况请看下图: 这就造成了当我们输入框获取焦点的时候,键盘弹起,下面的 ...

  5. 微信中使用popup等弹窗组件时点击输入框input键盘弹起导致IOS中按钮无效处理办法

    因为在IOS微信中在弹窗中使用input使键盘弹起,使弹窗的位置上移,当键盘关闭时页面还在上面,弹窗位移量也在上面,只有下拉才能回到原位,这样弹窗也消失了.我的处理办法就是在键盘弹起和消失的时候,让页 ...

  6. Layman 解决MUI 软键盘弹起挤压页面问题

    问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...

  7. H5软键盘弹起收回（IOS与Android）

    IOS下中,软键盘处于窗口最顶层,与原有的窗口不冲突,所以底部导航条不会被顶起,但是在android下,软键盘与窗口处于同一层,所以当软键盘弹起时,当前窗口缩小,那么窗口内容自然要被挤: 解决办法: ...

  8. ios 键盘弹起

    #pragma mark 键盘弹起操作 - (void)keyboardWillShow:(NSNotification *)notification{    NSDictionary *info = ...

  9. js 监听ios手机键盘弹起和收起的事件

    document.body.addEventListener('focusin', () => { //软键盘弹起事件 console.log("键盘弹起") }) docu ...

随机推荐

  1. 父类div高度适应子类div

    父类div高度适应子类div 通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可. 在有的情况下,子类div会 ...

  2. Linux进程间通信（三）：匿名管道 popen()、pclose()、pipe()、close()、dup()、dup2()

    在前面,介绍了一种进程间的通信方式:使用信号,我们创建通知事件,并通过它引起响应,但传递的信息只是一个信号值.这里将介绍另一种进程间通信的方式——匿名管道,通过它进程间可以交换更多有用的数据. 一.什 ...

  3. 用jQuery与JSONP轻松解决跨域访问的问题

    浏览器端的真正跨域访问,推荐的是目前jQuery $.ajax()支持get方式的跨域,这其实是采用jsonp的方式来完成的. var qsData = {'searchWord':$("# ...

  4. 【集训笔记】贪心算法【HDOJ1052 【HDOJ2037

    FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  5. KMP算法中的next数组求解示意图

  6. 增强for循环 -- foreach循环

    1  作用 简化迭代器的书写格式.(注意:foreach循环的底层还是使用了迭代器遍历.) 2  适用范围 如果是实现了Iterable接口的对象或者是数组对象都可以使用foreach循环. 3  格 ...

  7. 盘点selenium phantomJS使用的坑

    参考:http://www.jianshu.com/p/9d408e21dc3a   http://www.cnblogs.com/luxiaojun/p/6144748.html 豆瓣应该是ip被封 ...

  8. 集合和format

    昨天没来及整理博客,有点小累.休息了一下,今天的内容比较多 集合还是按照之前的方法,整理了一边所有的方法,其次在看了下format的方法 还有一些函数,暂时学了一点 还不知道怎么整理 s = {,,, ...

  9. HDU 2071 Max Num

    http://acm.hdu.edu.cn/showproblem.php?pid=2071 Problem Description There are some students in a clas ...

  10. JS实现 进度条 不用控件

    demo1 <html> <head> <title>进度条</title> <style type="text/css"&g ...