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

标签 javascript android css ios mobile

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

最佳答案

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

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

更新

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

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

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

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

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

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

iOS 更新

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

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

关于javascript - 虚拟键盘激活时的屏幕样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8556933/

相关文章:

c# - selenium webdriver 单击 javascript 链接

javascript - 如何在 Angular 中等待守卫

javascript - url 中的这个字符串意味着什么#!?

android - 在可扩展 ListView 上调用 setOnItemSelectedListener

java - RadioButton 在布局之间切换

javascript - 清除屏幕并移动html5 Canvas 中的元素

java - 在 Android 蓝牙打印机中以泰米尔语打印

css - 使用 ie-css3.htc 时悬停停止为元素工作

javascript - 如何使用 jquery 从左到右或从右到左为 2 个 css 布局设置动画?

css - 使用 Bootstrap 搭建脚手架和 Mixins