如何在 Web 应用程序上获取键盘高度

Posted 2023-03-04

【中文标题】如何在 Web 应用程序上获取键盘高度

【英文标题】：How to get keyboard height on a web app

【发布时间】：2017-05-31 18:55:08

【问题描述】：

这是一个网络应用程序，针对任何移动浏览器，但主要是适用于 ios10 的 Chrome 和 Safari。 当用户单击任何输入时，浏览器会打开内置键盘，这很好，但我正在尝试调整/重新定位在那个时间点与用户更相关的项目。

是否可以计算键盘的高度以便我可以相应地调整项目？通用解决方案会更好，因为输入可能会打开不同类型的键盘（文本、数字...），但硬编码选项在此阶段也是有效的响应。

我在window.screen、window.innerHeight等周围进行了测试，无济于事...

谢谢！

【问题讨论】：

你看过CSS media queries吗？

感谢 Alex 的建议，但除非我遗漏了什么，否则媒体查询对于为不同的视口定义不同的布局很有用，但在显示键盘时视口不会改变。

我试过@media all and (max-height: 700px)，打开软键盘时触发。在三星 S6、android 6.0.1 上的 Chrome 浏览器上测试。您也可以通过window.onresize 获得成功。用手机试试this fiddle。

感谢 Alex 的新建议。显示键盘时，您的小提琴确实会重新计算窗口的高度。虽然不需要媒体管理 - 至少对我而言，因为我需要的只是获取新旧大小的 javascript 逻辑。我相信 window.onresize 是我在自己的场景中缺少的触发器。你确实回答了这个问题。谢谢！

除了媒体查询，您还可以使用视口高度 (vh)。媒体查询、vh 或 window.onresize 在 iOS 上都不起作用。 codepen.io/kevinfarrugia/full/ggLKvx

【参考方案1】：

注意：这个答案的功劳完全归功于用户Alex k。然而，他的解决方案已经被 OP 接受 cmets 部分，我想这些应该在答案部分中 因为这是一个非常有用的问题。

要解决问题，请尝试CSS media queries，如下所示：

var d = document.getElementById('d');

checkDimensions();

window.onresize = checkDimensions;

function checkDimensions(prevHeight) 
  d.innerhtml = 'Window dimensions: ' + window.innerWidth + ' x ' + window.innerHeight;

.media-query-test 
  display: none;
  color: red;


@media all and (max-height: 700px) 
  .media-query-test 
    display: block;
  

<input type="number" />

<div id="d">
</div>

<div class="media-query-test">
  Height is less than 700px!
</div>

这是 JSFiddle：https://jsfiddle.net/t3yn2yz1/6/