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

理想情况下，我希望整个界面具有自定义样式，该样式可以在ios（itouch / ipad）或具有虚拟键盘的android上看到。请参阅下面的更多细节。

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

在网站（HTML / JavaScript / CSS）上同时定位android和ios。还请注意，内部布局为：“ fluid”。

编辑：这是更多的设计，然后是文字；因此，变化不会使人迷惑。在最低级别，我只希望有和没有虚拟键的设计更改（也许只是背景更改）。

这是一个好坏设计思想的问题尚待商bat。但是，我觉得这个问题无关紧要。对于此类攻击，可以使用更多的文字（例如游戏或交互式媒体）。

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

默认行为

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

期望的行为

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

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

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

更新资料

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

签入设备浏览器-http://jsfiddle.net/UHdCw/8/show/

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

（2）。如果您使用HTML5和Phonegap构建本机应用程序，则情况将有所不同。由于没有直接的API挂钩来检查键盘状态，因此我们必须在Phonegap中编写自己的插件。

在Android中，您可以使用本机代码[查看此处]检查键盘的显示/隐藏状态。并且必须编写Phonegap插件才能在HTML中获取这些事件。

[Phonegap是一个示例。我认为大多数html到本机框架都具有这种与本机代码挂钩的特性]

iOS更新

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

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

我遇到了同样的问题，这对我有用：

<!-- Android Viewport height fix-->
<script type="text/javascript">
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">');
}
</script> 

输入元素具有时，让JavaScript将一个类应用于正文focus。

$("input, textarea").focus(function(){  $(document.body).addClass('when-keyboard-showing');     });
$("input, textarea").blur( function(){  $(document.body).removeClass('when-keyboard-showing');  });

然后使用@media查询确定移动视图是否：

@media (max-width:550px) { 
    body.when-keyboard-showing .header { height:0; padding:0; }
}

该组合可让您在移动设备上按下键盘时对页面进行样式化。谢谢。

我有同样的问题。到目前为止，这是我的解决方案，如果有人可以在Apple上进行测试，我将不胜感激：http : //jsfiddle.net/marcchehab/f2ytsu8z/show（以查看源代码和所有内容：http : //jsfiddle.net/marcchehab/f2ytsu8z）

我以下列方式检测键盘是否处于伸出状态：加载后，我计算了一个变量“ sumedges”，即$（window）.width（）+ $（window）.height（）。然后，在$（window）.resize（）的情况下，我进行比较：如果总和$（window）.width（）+ $（window）.height（）小于“ sumedges”，则表示键盘为出来。在Android的Chrome浏览器上可以正常使用。您可以轻松地调整此代码以执行所需的任何操作。

var sumedges = $(window).width() + $(window).height();
$(window).resize(function(){
    if($(window).width() + $(window).height() < sumedges) {
    $("#display").html("keyboard out");
  } else {
    $("#display").html("keyboard in");
  }
});

使用jQuery，当您单击输入并弹出键盘时，我发现没有办法强制平滑过渡。但是，可能有可能欺骗系统：在小提琴中，我设置了一个假输入（蓝色）。当您单击它时，实际输入将出现在我的显示器下方（黄色）并被选中。这样一来，在Android上的Chrome上，一切看起来都很流畅。再次，如果您能进行测试，我将不胜感激。

$("#fakeinput").click(function(){
    $("#realinput").show().children("input").focus();
  $("html,body").scrollTop($("#display").offset().top);
});

$("#realinput input").blur(function(){
    $("#realinput").hide();
});

当键盘打开时，我使用简单的CSS媒体查询将活动输入移动到手机屏幕的顶部。像这样的准系统示例：

/* MOBILE KEYBOARD IS OPEN */
@media only screen and (max-width: 430px) and (max-height:400px){
    input:focus{
        position: fixed;
        top:50px;
    }
}