如何防止移动端键盘遮挡HTML输入框

Question

我有一个简单的Web应用程序，有几个文本输入框，但页面底部的输入框被iPhone键盘遮盖了。这是一种糟糕的用户体验，使得用户很难看到他们正在输入什么文本以及在输入完成后选择页面上的其他元素。

苹果在此处记录了此行为：https://developer.apple.com/library/archive/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html 我已经看到了一些关于这个问题的帖子，对于iOS应用程序开发有多种解决方案，但对于Web应用程序没有真正的解决方案。

我没有资源测试多个设备，并且我没有Android设备，所以我不知道这个问题是否也发生在那里。

是否有跨平台的解决方案来检测键盘何时遮盖UI，遮盖了多少UI，以及确保输入可见的方法呢？

- Scott Boring

---

有趣的是，这只在iOS上发生，安卓系统运行良好。但是，在我的应用程序中，聚焦事件上的滚动（如我的答案中所述）可以正常工作。 - dannybucks

Answer 1

这个答案是一个hack，但这是我能想到的最好的解决方案。

在页面底部添加一个足够大的内边距可以使内容在键盘可见时按预期显示。

使用一些javascript监听器和CSS类，在键盘显示时才会添加这个内边距。

body.keyboard {
    height: calc(100% + 500px); /* add padding for keyboard */
}

以下JavaScript代码将在输入框获得焦点时添加或移除CSS类，这是我能找到的最接近判断键盘是否显示的方法。

// focus events don't bubble, must use capture phase
document.body.addEventListener("focus", event => {
    const target = event.target;
    switch (target.tagName) {
        case "INPUT":
        case "TEXTAREA":
        case "SELECT":
            document.body.classList.add("keyboard");
    }
}, true); 
document.body.addEventListener("blur", () => {
    document.body.classList.remove("keyboard");
}, true); 

值得注意的是，如果输入字体大小小于16px，则iOS会执行令人烦恼的缩放操作，因此这也很重要。

input {
    font-size: 16px !important;
}

请告知我是否有更好的解决方案。

- Scott Boring

---

你还想检查屏幕大小，可能通过CSS，然后不使用你的.keyboard类。 - Avatar

Answer 2

这个怎么样：stackoverflow: 当键盘弹出时滚动文本框上移？

即使您没有使用jquery，您仍然可以绑定焦点事件并使用window.scrollTo(0, document.body.scrollHeight);函数滚动页面并滚动到底部。因为有趣的是，空间被创建了，但没有滚动。

如果您想要花哨一些，可以检查窗口大小，以确定是否以及如何滚动。

- dannybucks

---

谢谢Jeremy。至少对于iOS，它会自动滚动到输入位置；但是，只有在有足够空间滚动到该位置时才会这样做。因此问题就在于，如果一个输入框靠近页面底部且没有足够的空间向上滚动，则会被键盘遮挡。 - Scott Boring

Answer 3

你可以在任何点击事件中隐藏键盘。因此，找出什么时候不想显示键盘，什么时候确实想显示它。

一旦确定，就可以像这样隐藏键盘：

InputMethodManager manager = getSystemService(INPUT_METHOD_SERVICE);
manager.hideSoftInputFromWindow(getCurrentFocus().getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);

- Sagar Balyan

---

谢谢Sagar的回复；但是我觉得那并不能解决我的问题。我想让输入框在用户使用键盘时可见，这样他们就可以看到他们正在输入的文本。 - Scott Boring

Answer 4

对于 www.lokilist.com，我需要一个解决方案，用于输入会话 ID 的文本框无需 JavaScript即可正常工作。

在服务器上，我使用了在此处找到的 "isMobileDevice()" PHP 函数：

https://dev59.com/imUp5IYBdhLWcg3wf3ys#23874239

然后，只有在请求浏览器为“移动设备”时（该函数将平板电脑视为移动设备，这对于此目的来说更好，因为我们实际上关心的是触摸屏幕），才使用onfocus css附加css类。

总结一下：

1. 使用isMobileDevice()检测基于用户代理的触摸屏幕。

2. 在您的css中，包括一个占位符类，如“.mobileTextInput”。

3. 还要在您的css中包含该类的onfocus属性，例如“.mobileTextInput:focus”。这就是在选择时重新定位文本输入的内容。

4. 如果用户代理是移动设备，则将mobileTextInput类添加到您想要移动到虚拟键盘上方的文本元素中。

- babytazer

---

当键盘打开时，您如何知道要移动元素多远？ - duhaime

Answer 5

这里有一个可能会对你有帮助的答案：当键盘弹出时滚动文本字段

总之，你可以利用视觉视口 API 并相应地更新下一次渲染。

- Bru

Answer 6

我所做的是在触摸时将元素滚动到视图中。

没有确切的API或任何方式可以知道键盘是否打开，或者键盘覆盖了多少（实际上，在Chrome中，键盘会减小视口大小，而不是覆盖在顶部），但是看平均移动设备，大约覆盖一半。

至于实现，我使用了一种简单的启发式方法。您可以全力以赴，如果设备是触摸设备，则可以进行{{link1：在此处查看移动设备检测部分}}，但这并不一定包括带有触摸屏幕的笔记本电脑。（基于分辨率来做是一个坏主意）

我进一步采取了这种“触摸设备”方法，侦听表单元素的touchstart事件，并设置变量，例如hasTouchKeyboard，然后当集中时将元素滚动到页面顶部（或至少是第一半可能没有被覆盖）如果此变量为true。

这背后的想法是，touchstart 通常 在焦点事件之前触发，而真正的区别在于，如果用户触摸输入字段，则它100％使用触摸设备，并且实际上使用了触摸（这将可能触发键盘），而不仅仅是在混合设备上用鼠标聚焦它。

它绝对不是万无一失的，但相当简单，而且没有任何用户代理魔法或其他疯狂的东西，就能很好地工作。

- seekingtheoptimal

Answer 7

为了防止移动键盘覆盖HTML输入框，你可以使用CSS和JavaScript的组合。以下是一个可以帮助你实现这一目标的方法：

1. 检测键盘高度：由于不同的设备和平台可能具有不同的键盘高度，你需要动态地检测高度。你可以通过监听"resize"事件并在调整大小前后测量视口高度来实现这一点。差异将给出你键盘的高度。以下是一个JavaScript示例：

var keyboardHeight = 0;

window.addEventListener('resize', function() {
  var viewportHeight = window.innerHeight;
  var newKeyboardHeight = document.documentElement.clientHeight - viewportHeight;
  keyboardHeight = newKeyboardHeight > 0 ? newKeyboardHeight : 0;
});

调整布局：一旦您获得了键盘的高度，您可以调整布局以确保输入保持可见。一种常见的技术是使用vh（视口高度）CSS单位来设置包含输入字段的容器元素的高度。通过从视口高度中减去键盘的高度，您可以确保容器在键盘上方保持可见。以下是一个示例：

.container {
  height: calc(100vh - ${keyboardHeight}px);
  overflow-y: auto;
}

这段CSS代码将使容器在内容超过可用高度时可滚动。

3. 滚动到焦点输入框：当一个输入框获得焦点时，你可以滚动容器以确保输入框在键盘上方可见。这可以通过调整容器元素的滚动位置来实现。以下是一个JavaScript示例：

var inputs = document.querySelectorAll('input');

Array.from(inputs).forEach(function(input) {
  input.addEventListener('focus', function() {
    var scrollOffset = input.getBoundingClientRect().top - keyboardHeight;
    if (scrollOffset > 0) {
      document.querySelector('.container').scrollBy({
        top: scrollOffset,
        behavior: 'smooth'
      });
    }
  });
});

这段代码监听所有输入字段上的“focus”事件，并计算滚动偏移量，以将焦点输入带入视图。然后使用“scrollBy”方法滚动容器元素。

通过结合这些步骤，您可以动态调整布局，并确保在移动设备上键盘上方可见输入字段。

- Amin Omer

---

这个回答看起来像是ChatGPT。 - DavidW

这个答案有很高的概率是由人工智能生成的。在本网站上，这是不被容忍的。请阅读关于人工智能内容的指南：https://stackoverflow.com/help/gpt-policy - user18353868