虚拟键盘处于活动状态时的屏幕样式

理想情况下，我希望整个界面有一个定制样式这可以在 ios（itouch / ipad）或具有虚拟键盘的 Android 同等设备上看到。请参阅下面的更多细节。

当键盘“存在”时，自定义设置的 CSS 黑客规则将处于活动状态，也是一个可接受的解决方案。

在网站上同时针对 android 和 ios（HTML/JavaScript/CSS） 另请注意，里面的布局是："fluid".

Edit:这更多的是设计，然后是文字；因此，这些变化并不会让人迷失方向。在最低层面上，我只是希望在有或没有虚拟按键的情况下进行设计更改（也许只是背景变化）。

这是一个好还是坏的设计理念的问题是有争议的。不过我觉得与问题无关。对于这样的漏洞利用，可以有比文本更多的用途（例如游戏或交互式媒体）。

因此赏金：尽管不再需要我正在从事的项目的答案（使用了替代设计）。我仍然相信这个问题可以通过回答而受益。

默认行为

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

期望的行为

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

我不确定，这是想要的效果吗？检查此链接

http://jsfiddle.net/UHdCw/3/ http://jsfiddle.net/UHdCw/3/

Update

(1).假设它是一个网站并在设备浏览器上运行。然后我们可以通过检查屏幕尺寸来检查虚拟键盘是否存在。

检查设备浏览器 -http://jsfiddle.net/UHdCw/8/show/ http://jsfiddle.net/UHdCw/8/show/

代码 ： -http://jsfiddle.net/UHdCw/8/ http://jsfiddle.net/UHdCw/8/

（2）。如果您使用 HTML5 和 Phonegap 构建本机应用程序，情况会有所不同。由于没有直接的 API 钩子来检查键盘状态，我们必须编写我们的自己的插件 http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins在电话间隙。

在 Android 中，您可以使用本机代码检查键盘的显示/隐藏状态 [检查这里 https://stackoverflow.com/questions/2150078/android-is-software-keyboard-shown]。并且必须编写 Phonegap 插件才能在 HTML 中获取这些事件。

[Phonegap 就是一个例子。我认为大多数 html 到本机框架都有这种与本机代码挂钩的能力]

iOS更新

正如您所说，当键盘存在时，高度/位置没有变化。我们可以做一件事，当输入获得焦点时，我们可以添加收缩类并减小元素大小。检查以下链接。

http://jsfiddle.net/UHdCw/28/show/ http://jsfiddle.net/UHdCw/28/show/