【JS】更新了ios11.1.1后，html里的输入法键盘出现悬浮问题？

我在开发一个内嵌在app里的富文本框（contenteditable）页面。
IOS在系统>=11.1.1里会遇到一个这样的坑，就是点击完富文本框后，html的滚动条会剩下screen.height-键盘的高度，使用window.scrollTo和scrollTop()的方法设置到html的底部也无法设置，max值只能到达screen.height-键盘的高度位置，但是手动触发滚动却可以滚动到底部，在之前的ios9-ios11系统里都不会重现这个问题。
附上3图，最后一张是分析图，不知道你们会不会遇到，该如何解决
【JS】更新了ios11.1.1后，html里的输入法键盘出现悬浮问题？
【JS】更新了ios11.1.1后，html里的输入法键盘出现悬浮问题？
【JS】更新了ios11.1.1后，html里的输入法键盘出现悬浮问题？

回答

解决ios系统里 input/textarea/contenteditable 固定底部，点击输入框键盘被覆盖统一解决方案：（亲测）

针对ios系统兼容
1.version < ios11：利用原生的scrollIntoView()&&scrollIntoViewIfNeeded();

$('input').focus(function(){
    settimeout(()=>{
        $('input')[0].scrollIntoView();
        $('input')[0].scrollIntoViewIfNeeded();
    }, 500)
})

2.ios11.0 <= version < ios12：利用定位方法以及原生方法

$('input').focus(function(){
    $('input').css({'position':'absolute'});
    setTimeout(function(){
        $('input')[0].scrollIntoView();
        $('input')[0].scrollIntoViewIfNeeded();
    },500);
})
$('input').blur(function(){
    $('input').css({'position':'fixed'});
})

3.>= ios12：系统兼容得很好，只需要处理好微信input失焦后会卡顿需要模拟点击页面才会还原。

$('input').blur(function(){
    if(weixin()){   
        let scrollTop = document.body.scrollTop;
        window.scroll(0 ,scrollTop);
    }
})

我这边的情况是你不设置scrollTop值，safari能自动帮你推上去（但有可能会遮住一部分），但只要你在键盘弹起后设置scrollTop值，不仅无效而且会直接变成0（如果你的页面只有一屏高）。
键盘弹起的时候window.innerHeight没变。

我这边是ios11.1底部的input框使用scrollIntoView，input框也不会弹起，11.0几一下的就可以，具体原因还在查，目前我测试6s升级到11.1，8p11.1系统的都是这个样子，如果楼主解决了麻烦贴下解决方式

同样有这个问题暂时没有解决方案

有人解决了么。。。好急啊...

scrollIntoView()和scrollIntoViewIfNeeded()在ios 11.2以上的版本中，不起作用，导致点击输入框，键盘遮挡输入框的情况，请问，大神是怎么解决的呢?

你确定第二点有效吗？而且第二点的具体版本是11.1和11.2

以上是 【JS】更新了ios11.1.1后，html里的输入法键盘出现悬浮问题？ 的全部内容， 来源链接： utcz.com/a/87900.html

回到顶部