关于苹果浏览器Safari弹出键盘把文本框挡住的问题

ddee
  • 118

这几天我在用vue做一个移动端聊天界面,其中有个用定位为fixed的文本框input,定位在最底下,bottom为0,用安卓浏览器弹出键盘是不会挡住文本框的,但是用苹果浏览器Safari的时候就会挡住input,请问有没有人解决过

回复
阅读 6.1k
1 个回答

这个fixed是很多人的痛啊.

貌似也没有特别好的解决方案,你是用的safari是哪个版本下的?

因为我最近使用 input 进行 fixed 定位的时候,发现能够自动弹上去的。

还有一点就是第三方的输入法好像由于多一个bar,也会遮挡。

可以使用下面这种方式曲折的解决:

<body>
    <input type="text" class="form-control" placeholder="输入内容..." id="textInput">
</body>
<script>
    var interval;
    //消息框获取焦点
    $('#textInput').focus(function () {
        interval = setInterval(function () {
            scrollToEnd();
        }, 500)
    })
    //消息框失去焦点
    $('#textInput').blur(function () {
        clearInterval(interval);
    })
    function scrollToEnd() {
        // document.body.scrollTop = document.body.scrollHeight;
        document.body.scrollTop = (parseInt(document.body.scrollHeight.split("px")[0])-50)+'px';
    }
</script>

在滚动的时候,减去50px,效果和弹起的效果差不多。 iphone6sp/iphone5s/iphone6s 下测试的

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏