虚拟键盘处于活动状态时的屏幕样式 [英] screen styling when virtual keyboard is active

问题描述

理想情况下，我希望整个界面具有自定义样式，可以在 ios(itouch/ipad)或带有虚拟键盘的 android 等价物上看到.请参阅下文了解更多详情.

Ideally, i would want the entire interface to have a custom styling that is seen on the ios (itouch / ipad) or android equivalent with the virtual keyboard present. See below for more details.

自定义设置的 CSS hacking 规则在键盘存在"时处于活动状态，也是一种可接受的解决方案.

A custom set CSS hacking rules to be active, when the keyboard is "present", is also an acceptable solution.

在网站 (HTML/JavaScript/CSS) 上同时针对 android 和 ios还要注意里面的布局是:"fluid".

Targets both androids and ios, on a website (HTML/JavaScript/CSS) Also note that the layout inside is: "fluid".

这是更多的设计，然后是文本；所以这些变化并没有让人迷失方向.在最低级别，我只希望使用和不使用虚拟键进行设计更改(也许只是背景更改).

This was more design, then text; So the changes are not disorientating. At the lowest level, I just desire a design change with and without the virtual keys (Perhaps just a background change).

关于这是一个好还是坏的设计理念的问题是有争议的.不过，我觉得这个问题无关紧要.对于此类漏洞利用，其用途可能超过文本(例如游戏或互动媒体).

因此收获颇丰:尽管我所从事的项目不再需要答案(使用了替代设计).我仍然相信这个问题可以从回答中受益.

Hence the bounty: Despite no longer needing the answer for the project I was working on (an alternative design was used). I still believe this question can benefit from being answered.

默认行为

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

期望的行为

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

推荐答案

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

I'm not sure, is this the desired effect?. check this link

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

更新

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

(1). Assuming its a website & running on device browser. Then we can check the presence of virtual keyboard by checking the screen size.

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

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

(2).如果您正在使用 HTML5 & 构建本机应用程序Phonegap，事情会有所不同.由于没有直接的 API 钩子来检查键盘状态，我们必须编写我们的 自己的Phonegap 中的插件.

(2). If you are building native app with HTML5 & Phonegap, things will be different. Since there is no direct API hook to check the keybord status, we have to write our own plugin in Phonegap.

在 Android 中，您可以使用本机代码 [检查此处].并且必须编写 Phonegap 插件才能在我们的 HTML 中获取这些事件.

In Android you can check show/hide status of keyboard by using native code [check here]. and have to write Phonegap plugin to get those events in our HTML.

[Phonegap 就是一个例子.我认为大多数 html 到本机框架都有这种与本机代码挂钩的便利]

[Phonegap is an example. I think most of the html to native frameworks have this kind of felicity to hook with native code ]

iOS 更新

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

As you said there is no change in height/position when keyboard is present. We can do one thing, when input gets the focus we can add shrink class and reduce the element sizes. Check following link.

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

这篇关于虚拟键盘处于活动状态时的屏幕样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！