我正在为 iPad 编写一个网络应用程序（不是一个普通的 App Store 应用程序——它是使用 HTML、CSS 和 JavaScript 编写的）。由于键盘占据了屏幕的很大一部分，因此在显示键盘时更改应用程序的布局以适应剩余空间是有意义的。但是，我发现无法检测何时或是否显示键盘。
我的第一个想法是假设当文本字段具有焦点时键盘是可见的。但是，当外部键盘连接到 iPad 时，当文本字段获得焦点时，虚拟键盘不会显示。
在我的实验中，键盘也没有影响任何 DOM 元素的高度或滚动高度，而且我没有发现指示键盘是否可见的专有事件或属性。
我找到了一个有效的解决方案，虽然它有点难看。它也不适用于所有情况，但对我有用。由于我将用户界面的大小调整为 iPad 的窗口大小，因此用户通常无法滚动。换句话说，如果我设置了窗口的 scrollTop，它将保持为 0。
另一方面，如果显示键盘，滚动会突然起作用。所以我可以设置scrollTop，立即测试它的值，然后重置它。以下是使用 jQuery 的代码中的样子：
$(document).ready(function(){
$('input').bind('focus',function() {
$(window).scrollTop(10);
var keyboard_shown = $(window).scrollTop() > 0;
$(window).scrollTop(0);
$('#test').append(keyboard_shown?'keyboard ':'nokeyboard ');
});
});
通常，您希望这对用户不可见。不幸的是，至少在模拟器中运行时，iPad 明显（虽然很快）再次上下滚动。尽管如此，它仍然有效，至少在某些特定情况下是这样。
我已经在 iPad 上测试过了，它似乎工作正常。
您可以使用focusout事件来检测键盘关闭。这就像模糊，但气泡。它会在键盘关闭时触发（当然在其他情况下也是如此）。在 Safari 和 Chrome 中，事件只能使用 addEventListener 注册，而不能使用旧方法注册。这是我用来在键盘关闭后恢复 Phonegap 应用程序的示例。
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
如果没有此代码段，应用程序容器将保持在向上滚动的位置，直到页面刷新。
如果有屏幕键盘，聚焦靠近视口底部的文本字段将导致 Safari 将文本字段滚动到视图中。可能有一些方法可以利用这种现象来检测键盘的存在（页面底部有一个微小的文本字段，可以暂时获得焦点，或者类似的东西）。
也许更好的解决方案是在各种输入字段上绑定（在我的情况下使用 jQuery）“模糊”事件。
这是因为当键盘消失时，所有表单域都变得模糊了。所以对于我的情况，这个剪辑解决了这个问题。
$('input, textarea').bind('blur', function(e) {
// Keyboard disappeared
window.scrollTo(0, 1);
});
希望能帮助到你。米歇尔
在焦点事件期间，您可以滚动超过文档高度，并且 window.innerHeight 会神奇地减少虚拟键盘的高度。请注意，横向和纵向的虚拟键盘大小不同，因此您需要在它发生变化时重新检测它。我建议不要记住这些值，因为用户可以随时连接/断开蓝牙键盘。
var element = document.getElementById("element"); // the input field
var focused = false;
var virtualKeyboardHeight = function () {
var sx = document.body.scrollLeft, sy = document.body.scrollTop;
var naturalHeight = window.innerHeight;
window.scrollTo(sx, document.body.scrollHeight);
var keyboardHeight = naturalHeight - window.innerHeight;
window.scrollTo(sx, sy);
return keyboardHeight;
};
element.onfocus = function () {
focused = true;
setTimeout(function() {
element.value = "keyboardHeight = " + virtualKeyboardHeight()
}, 1); // to allow for orientation scrolling
};
window.onresize = function () {
if (focused) {
element.value = "keyboardHeight = " + virtualKeyboardHeight();
}
};
element.onblur = function () {
focused = false;
};
请注意，当用户使用蓝牙键盘时，keyboardHeight 为 44，即 [previous][next] 工具栏的高度。
进行此检测时会出现一点点闪烁，但似乎无法避免。