h5页面ios键盘弹出收起后页面底部留白问题

最新推荐文章于 2025-04-08 10:33:10 发布

原创最新推荐文章于 2025-04-08 10:33:10 发布 · 600 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #html5 #前端

开发同时被 3 个专栏收录

48 篇文章

订阅专栏

技术

47 篇文章

订阅专栏

学习

42 篇文章

订阅专栏

本文介绍了一个简单的解决方案来解决iOS设备上常见的键盘弹出时导致页面底部出现空白的问题。通过监听输入框的聚焦与失焦事件，实现自动滚动页面来消除空白区域。

<textarea style="width:100%;height: 180px;background: #F4F4F4;border-radius: 10px;border:0;font-size: 14px;color: #666666;padding: 20px;" data-val="true" name="CommentContent" id="CommentContent" @focus="focusIn" @blur="blurIn"></textarea>

focusIn() {
   // ios键盘弹出底部留白问题
   const body = document.querySelector('#CommentContent') // input所在的容器
   body.scrollTop = body.scrollHeight
 },
 blurIn() {
    // ios键盘弹出底部留白问题
    window.scroll(0, 0)
 }

内容转自：https://blog.csdn.net/dbp47524/article/details/102396414/