键盘显示混乱的元素位置答案

【问题标题】：Keyboard Showed messed up elements' position键盘显示混乱的元素位置
【发布时间】：2012-10-25 09:24:39
【问题描述】：

我的游戏需要手机的触摸键盘输入。它的显示有问题，每当键盘出现在文本输入焦点上时，我所有的 position: absolute 元素都会搞砸。

是否有一个插件可以让移动键盘始终显示，以便我重新定位所有元素，或者我需要更改 css 来制作元素，以便在键盘显示时不会弄乱？

我应该如何实现这个？

这是css元素之一：

#mixer{  
    position: absolute;  
    bottom:29%;
    left:25%;
    width: 234px;  
    height: 210px;  
    background: transparent url(img/mixer.png) 0 50px no-repeat;  
}

注意：我在 Android 环境下使用的是 Jquery mobile，phonegap。

【问题讨论】：

您能提供更多信息吗？像 HTML 和相关的样式。

标签： android css android-layout cordova keyboard

【解决方案1】：

在您的 AndroidManifest.xml 中，使用键盘在 Activity 下添加以下行：

android:windowSoftInputMode="adjustNothing"

【讨论】：

【解决方案2】：

我认为您的问题在于您的底部属性设置为“在这种情况下”29%。您可能希望使用 TOP 而不是底部将其设置为绝对值。

这样它将从顶部推动而不是从底部看，在这种情况下是键盘。

所以你希望它位于底部的 29%，100 - 29 = 71 移除底部 29% 并将其更改为顶部 71%。

【讨论】：

它仍然改变了我的元素
我相信您必须以像素为单位指定它才能获得固定位置，否则这个答案应该是正确的。

【解决方案3】：

监听显示/隐藏软键盘事件。 SO上的这个答案有一个代码示例：

Softkeyboard event Listener in Android

当软键盘处于显示状态时，为您的游戏使用单独的“keyboard-is-shown”CSS。当软键盘被隐藏时，恢复到以前的“键盘关闭”CSS。

之前关于 SO 的 Q&A 处理了类似的情况：

phonegap application layout issue with soft keyboard in Android 2.3.6 and in iPhone 5.0

【讨论】：

【解决方案4】：

我在 iPad 应用而不是 Android 上遇到了这个问题，但它看起来是同样的问题。

当大小改变时，jQuery mobile 使用 javascript 设置页面高度 - 与页面底部对齐的任何内容在 html 中向上移动，同时操作系统向上滚动整个视图以保持输入的先前位置可见.

我修复了一些 css 导致浏览器忽略高度设置的问题。它还使方向变化更加平滑。

.ui-mobile, .ui-mobile .ui-page {
    min-height: 100% !important;
    }

【讨论】：

【解决方案5】：

查看这些链接-

http://android-developers.blogspot.in/2009/04/updating-applications-for-on-screen.html

http://developer.android.com/reference/android/R.attr.html#windowSoftInputMode

尝试将 manifest android:windowSoftInputMode="adjustResize" 参数添加到您的活动标签中。

希望对你有帮助。

【讨论】：