当前位置：文江博客话题详情

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

发布于 2022-09-05 21:41:22 字数 122 浏览 40 评论 0

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧情别恋 2022-09-12 21:41:22

这个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 下测试的

回复收藏 0

~没有更多了~