html - 焦点输入字段被虚拟键盘遮挡

标签 html css mobile touch firefox-os

例子:

<!DOCTYPE html>
<title>Test</title>
<body style="position: relative; overflow: hidden;">
  <input type="text" style="position: absolute; top: 420px;">
</body>

请看下面的图像序列,从左到右:

  1. 页面刚加载。

  2. 重点输入字段。它被虚拟键盘遮挡了。

  3. 只有在用户开始输入时,输入字段才会可见。

删除 overflow: hidden 使输入字段在焦点处可见,我认为这对用户更友好。

有没有办法为正文指定 overflow hidden ,而不是让虚拟键盘遮挡焦点输入字段?

Sequence of screenshots of Firefox OS simulator

最佳答案

我通过动画解决了屏幕键盘和滚动页面的模糊输入问题

    var headerHeight = $("header").outerHeight(true);
    $(document).on('focus', 'input:not([name=option]),select,textarea', function (e) {
        $("html").animate({ scrollTop: $(e.target).offset().top - (headerHeight + 30) }, 500);
    });

你也可以使用这些功能

scrollIntoView scrollIntoViewIfNeeded

关于html - 焦点输入字段被虚拟键盘遮挡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41087521/

相关文章:

jquery - 如何定位多级无序列表中的顶级链接?

html - 修复 Canvas 外的侧边栏

Angular - 根据设备是移动设备还是桌面设备换出模板

java - EditText android L stylin'

javascript - Bootstrap 操作方法 : checkbox should change text input value when selected/checked

javascript - 如何制作具有高亮样式的事件菜单项?

html - 需要帮助,CSS 和 WORDPRESS

javascript - 如何重定向到移动版本的网站但保持相同的页面?

用于保留尖括号的 HTML 标记

css - 将手机内容下移