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

Posted 2023-03-31

【中文标题】虚拟键盘激活时的屏幕样式

【英文标题】：screen styling when virtual keyboard is active

【发布时间】：2011-12-19 03:53:58

【问题描述】：

理想情况下，我希望整个界面具有 自定义样式，可以在 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  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

【问题讨论】：

为什么？当您尝试键入时，让内容消失令人讨厌，但大幅调整大小可能会使其可见但难以或无法实际阅读。 （我不知道 iOS 是做什么的，但在我的 Android 手机上，如果你像这样调整内容的大小会很难阅读。）你打算在纵向和横向都这样做吗？顺便说一句，漂亮的 ASCII 艺术。

@nnnnnn 它是一个流畅的布局，所以它不会调整文本字体的大小（保持不变）......只是我想要两个单独的输入框（顶部和底部）重新定位自己, 都在视图中。然而，不相关的中心内容很可能会被“隐藏”。它适用于肖像和风景（尽管实际上只有肖像才有意义）

nnnnn 所说的 +1。您的用户不会期望这种行为并且不会理解它。保持原样。

@RyanShillington ：流体布局，假设整个区域都是文本，但它可能只是单行文本输入，其余部分是对更新大小作出反应的动态背景（而不是溢出到“无处”）

您可以尝试使用仅在键盘可见时显示的第二种布局

【参考方案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/

【讨论】：

+1 用于尝试：是的，键盘处于活动状态时的自定义样式......它也是一个关于如何在不使事情变得过于复杂的情况下更改内容的示例，只有图像调整大小：不是text... 但是它错过了最重要的一点，即如何检测活动的本机键盘。 >.

不用担心，它只是网站和设备浏览器......不，它在 iOS 上不起作用，因为浏览器没有调整大小，整个块向上移动。虽然这可以防止布局更改，但它可以防止尺寸更改检测......这是一个好主意=D我真的希望它会起作用，并且觉得它是有道理的。

hmm.. 我没有在 iOS 上检查过。它在我的 Galaxy S 中运行良好。让我们检查一下针对 iOS 的任何调整。:)

将 ios 检测混合在一起似乎是一个足够好的黑客攻击。 =) 你在探索中的努力得到了赏金。

【参考方案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> 

【讨论】：

这是如何工作的？如果我理解，元标记是在文档加载时写入的，这意味着如果用户聚焦一个元素并在页面加载后打开键盘 - 应该会出现问题......

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

【参考方案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; 

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

【讨论】：

+1 虽然这个解决方案在用户插入外接键盘时会产生误报，但它仍然比计算某些元素的高度要好得多（用户可以旋转他的手机，分割他的屏幕。FFS，甚至桌面用户可以调整他的窗口大小）。

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

【参考方案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();
);

【参考方案5】：

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

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

【参考方案6】：

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

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

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

【讨论】：

实际上，当键盘处于活动状态时，Android 确实会调整视口的大小。据我所知，已经这样做了。但我最近遇到了 iOS 的问题，所以打算看看那个库。谢谢！