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

Question

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

javascriptandroidcssiosmobile

98

理想情况下，我希望整个界面都有一个自定义的样式，就像在 iOS（itouch/ipad）或 Android 中使用虚拟键盘时看到的那样。请参阅以下详细信息。

当键盘“存在”时，启用一组自定义 CSS 黑客规则也是可接受的解决方案。

针对 HTML/JavaScript/CSS 网站的 Android 和 iOS，还要注意内部布局为“流程性”。

编辑：这更多的是设计而不是文本；因此更改并不令人迷失方向。在最低级别上，我只希望进行设计更改，有或没有虚拟键（也许只是背景更改）。

关于这是否是一个好的设计想法的问题是有争议的。但是，我认为和这个问题无关。因为这样的利用可以在文本之外具有用途（如游戏或交互媒体）。

因此，悬赏：虽然我不再需要这个答案来完成我正在工作的项目（使用了另一种设计）。但我仍然相信这个问题可以从回答中受益。

默认行为

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

期望的行为

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

- PicoCreator

9

为什么要这样做？当你在输入时，东西突然消失确实很烦人，但是大幅缩小大小可能会使其可见，但实际上阅读起来可能会变得困难或不可能（我不知道iOS会怎么做，但在我的安卓手机上，如果你这样调整大小，它将非常难以阅读）。您计划在横屏和竖屏方向下都这样做吗？顺便说一句，不错的ASCII艺术。 - nnnnnn

2

@nnnnnn 这是一个流式布局，因此它不会调整文本字体大小（保持不变）...我只是想让两个单独的输入框（顶部和底部）重新定位，以便都在视野内。然而，无关的中心内容很可能会被“隐藏”。这适用于纵向和横向（尽管实际上只有纵向才有意义）。 - PicoCreator

4

同意nnnnn所说。您的用户不会预期这种行为，也不会理解它。保持原样。 - Ryan Shillington

1

你可以尝试使用第二个布局，仅在键盘可见时显示。 - Andreas

最终，由于您的终极目标是用户友好的UI，我建议您将其保持在他们熟悉的方式，而不是使事情变得复杂。 - Malitta N

显示剩余2条评论

7个回答

16

在输入元素获得焦点时，让JavaScript将一个类应用于。

让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; }
}

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

- redolent

2

尽管当用户插入外部键盘时，此解决方案可能会产生误报，但它仍然比计算某些元素的高度要好得多（用户可以旋转手机、分割屏幕。该死的，甚至桌面用户也可以调整窗口大小）。 - Kamil Bęben

1

在 Android 上，可能还可以从屏幕上移除虚拟键盘（也许在 iOS 上也可以？），同时保持文本字段的焦点。 - Chunky Chunk

16

我遇到了相同的问题，这个解决方法对我有用：

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

- benone

11

这怎么可能实现呢？如果我理解正确的话，元标记是在文档加载时编写的，这意味着如果用户在页面加载后聚焦一个元素并打开键盘，则问题会发生... - Yuki

其他不是Android的设备可能也有虚拟键盘（很可能），因此这个解决方案对它们无效，因此除非所有用户都保证使用该操作系统，否则不应该使用特定于操作系统的解决方案。 - vsync

4

在我的情况下，这个问题只出现在安卓的Chrome浏览器上。在Firefox和三星Internet浏览器上都没有问题（哇）。最终发现Chrome团队一个月前发布了这篇文章：https://developer.chrome.com/blog/viewport-resize-behavior/。在添加了以下代码<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">之后，问题得到了解决。

- Yordan Georgiev

1

这应该是我的答案。使用移动浏览器内置的API来遵守该元标签。运行得很好，不需要调整视图大小的技巧。 - undefined

4

我遇到了同样的问题。这是我目前的解决方案，如果有人能够在苹果上测试一下，我会非常感激：http://jsfiddle.net/marcchehab/f2ytsu8z/show（查看源代码和其他内容：http://jsfiddle.net/marcchehab/f2ytsu8z）。

我用以下方法检测键盘是否弹出：在加载时，我计算一个名为“sumedges”的变量，它是$(window).width() + $(window).height()。然后，在$(window).resize()事件中，我进行比较：如果$(window).width() + $(window).height()之和小于“sumedges”，则表示键盘已经弹出。这在安卓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，我发现没有办法在点击输入框并弹出键盘时强制实现平滑过渡。但是，也许可以诱骗系统：在这个演示中，我设置了一个假的输入框（蓝色）。当你点击它时，真正的输入框出现在我的显示器下方（黄色），并被选中。这样，在安卓Chrome浏览器上看起来非常平滑。如果您能测试一下，我将不胜感激。

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

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

- Marc Chéhab

4

我使用简单的CSS媒体查询来将活动输入框移动到屏幕顶部，当在移动设备上打开键盘时。类似这个基本示例：

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