Question

我很难找到解决方法。我们构建的系统具有文本编辑区域，而在我的iPhone上，键盘弹出并与页面内容重叠。我正在寻找一种将整个页面向上推的方法，以便键盘位于其下方，用户仍然应该能够上下移动页面，但是键盘不必首先将其重叠，这样他们就可以没有看到他们点击的输入框。

所以我想我的问题是：

1）如何检测打开的键盘，当您使用Cordova构建混合应用程序时，这非常容易，但是如何在普通的响应式网页上进行操作呢？ 2）如何知道将页面向上推多少，使键盘首先位于底部？

Answer 1

一种解决方案是监听focus元素上的<textarea>事件，如果它获得焦点，则滚动整个页面，直到<textarea>与页面的上端对齐为止。屏幕。可以断定这将一直有效，因为每次对区域进行聚焦时，键盘都会自动弹出。由于键盘是页面外部的本机控件，因此您无法从页面内部获得高度。

缺点是，您必须确保<textarea>之后的内容足够长以允许滚动–否则，该区域的顶部边框将与窗口的顶部将被键盘隐藏。

以下是一个演示示例：

const area = document.querySelector('#area'); // get textarea element

const distanceTo = element => { // get distance from current position to top of element
  return window.scrollY + element.getBoundingClientRect().top;
}

const scrollPageBy = topDist => { // scroll window to y coordinate
  window.scrollTo(0, topDist);
}

area.addEventListener('focus', () => {
  scrollPageBy(distanceTo(area));
});

<p>
Linebreaks are just for adding space
</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form action="#noop" method="POST">
  <textarea id="area"></textarea>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

JavaScript通过移动键盘提升内容

1 个答案: