虚拟键盘激活时的屏幕样式

Question

理想情况下，我希望整个界面具有 自定义样式，可以在 ios (itouch / ipad) 或带有虚拟键盘的 android 上看到。详情见下文。

当键盘“存在”时，自定义设置的 CSS hacking 规则也是一个可接受的解决方案。

在网站上同时定位 android 和 ios (HTML/JavaScript/CSS) 还要注意里面的布局是：“fluid”。

编辑：更多的是设计，然后是文字；所以这些变化不会让人迷失方向。在最低级别，我只希望有或没有虚拟键的设计更改（也许只是背景更改）。

这是一个好还是坏的设计理念，这个问题值得商榷。但是，我觉得与问题无关。对于这样的利用，可以使用比文本更多的东西（例如游戏或交互式媒体）。

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

默认行为

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

期望的行为

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

Answer 1

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

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

更新

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

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

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

(2)。如果您使用 HTML5 和 Phonegap 构建原生应用程序，情况会有所不同。由于没有直接的 API 挂钩来检查键盘状态，我们必须在 Phonegap 中写入我们的own plugin。

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

[Phonegap 就是一个例子。我认为大多数原生框架的 html 都有这种与原生代码挂钩的好处]

iOS 更新

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

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

Answer 2

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

<!-- 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> 

Answer 3

当输入元素具有 focus 时，让 JavaScript 将类应用到 body。

$("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; }
}

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

Answer 4

我遇到了完全相同的问题。到目前为止，这是我的解决方案，如果有人可以在 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();
});

Answer 5

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

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

Answer 6

视口高度需要自己调整，iOS和Android不做。

但是有一个库可以修复它：

https://github.com/adamjgrant/a-viewport-that-works