Question

理想情况下，我希望整个界面都有一个自定义样式，可以在ios（itouch / ipad）或者等效的虚拟键盘上看到。有关详细信息，请参见下文。

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

在网站上定位机器人和ios（HTML / JavaScript / CSS）另请注意，内部布局为：“流畅”。

编辑：这是更多的设计，然后是文字;所以这些变化并没有让人迷失方向。在最低级别，我只是希望在有和没有虚拟键的情况下进行设计更改（可能只是背景更改）。

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

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

默认行为

                       +--------+ 
                       |        |
+------------+       +-+-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）。假设它是一个网站＆amp;在设备浏览器上运行。然后我们可以通过检查屏幕大小来检查虚拟键盘的存在。

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

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

（2）。如果您正在使用HTML5＆amp ;;构建本机应用程序Phonegap，事情会有所不同。由于没有直接的API挂钩来检查keybord状态，我们必须在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会将类应用于正文。

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

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

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

Answer 5

我有确切的问题。到目前为止，这是我的解决方案，如果有人可以在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 6

你必须自己调整视口高度，iOS和Android不要这样做。

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

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

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

6 个答案: