WEB开发中,输入框被弹起的虚拟键盘遮挡住了?

发布于 2022-08-31 20:48:11 字数 308 浏览 7 评论 0

这是一个很诡异的问题。
我的iPhone4SiPad Air未出现被虚拟键盘遮挡的问题。
同事的iPhone4iPad三星iPhone5S会出现被虚拟键盘遮挡的问题。

我想这个情况应该由操作系统来处理的,当输入组件focus后,虚拟键盘弹起并把网页向上推一定距离(或者调整输入组件在合适的位置)。是这样的吗?

另外,遇到输入框被虚拟键盘遮挡的问题该如何解决呢?

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

扫码二维码加入Web技术交流群

发布评论

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

评论(6

§对你不离不弃 2022-09-07 20:48:11

应该是 body 的高度为 100% 导致的。

jsif (isAndroid) {
    var windowHeight = document.documentElement.clientHeight;
    document.body.style.height = windowHeight + 'px';
}

可能会引起其它一些副作用,我也正在着手解决这个问题。

风情万种。 2022-09-07 20:48:11

在设计上解决这个问题,不让输入框位于半屏下。万能的传送门:http://my.oschina.net/cjlice/blog/625526

相思碎 2022-09-07 20:48:11

focus时让页面滚上去,让输入框露出来呗。。

鹤舞 2022-09-07 20:48:11

在高度的布局上写死,overflow:scroll

×眷恋的温暖 2022-09-07 20:48:11

if (/Android/gi.test(navigator.userAgent)) {

        console.log('01');
        window.addEventListener('resize', function () {
          console.log('02');
          if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
            window.setTimeout(function () {
              console.log('03');

              document.activeElement.scrollIntoViewIfNeeded();
            }, 0);
          }
        })
      }
别在捏我脸啦 2022-09-07 20:48:11

isAndroid是什么呢

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文