我正在开发版本为2.9.0的phonegap应用程序;
使用RWD Bookmarklet（http://responsive.victorcoulon.fr/）在桌面浏览器中对布局进行了全面测试，并且工作正常。但是，在移动设备或仿真器中进行测试时，布局中断了。经过一点点测试，我发现问题是状态栏的高度。将应用程序更改为全屏，问题解决了。
但现在，当我专注于输入字段时，屏幕未被调整，因此，键盘覆盖了输入字段！
在查看了所有问题和相关问题之后，我找到了this一个，这对我来说很有意义，但我想知道是否有办法让调整盘全屏工作，所以我不知道我需要调整所有组件的高度，根据设备计算不同的状态栏高度等。
码
form.html
<form id="login-form">
<div class="form-group">
<input type="text" name="login" class="form-control" id="login"
placeholder="xxxxxxx@example.com">
</div>
<div class="form-group">
<input type="password" name="pass" class="form-control"
id="password" placeholder="*******">
</div>
<a class="pull-right login-btn" id="btn-login" href="#"><span
class="image-replacement"></span></a>
<a class="pull-right login-btn" id="btn-cadastro" href="#"><span class="image-replacement"></span></a>
</form>
Android Manifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:windowSoftInputMode="adjustPan"
package="com.com.app" android:versionName="1.0" android:versionCode="1" android:hardwareAccelerated="true">
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:xlargeScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
<application android:icon="@drawable/icon" android:label="@string/app_name"
android:hardwareAccelerated="true"
android:debuggable="true">
<activity android:name="App" android:label="@string/app_name"
android:theme="@android:style/Theme.Black.NoTitleBar"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
android:windowSoftInputMode="stateVisible|adjustPan">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="7" android:targetSdkVersion="17"/>
</manifest>
App.java
package com.com.app;
import org.apache.cordova.Config;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.view.WindowManager;
public class BDH extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
getWindow().setFlags(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN, WindowManager.LayoutParams.SOFT_INPUT_MASK_ADJUST);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
super.loadUrl(Config.getStartUrl());
//super.loadUrl("file:///android_asset/www/index.html")
}
}
答案 0 :(得分：2)
<强>更新
按照我的原始回答，以下JavaScript将适用于windowSoftInputMode="adjustResize"，但是，它不适用于"adjustPan"，因为键盘时不会触发JavaScript resize()事件显示。
但是，正如前面提到的here，您可以通过将GlobalLayoutListener挂钩到ViewTreeObserver来捕获Java端显示的键盘事件：
package com.com.app;
import org.apache.cordova.Config;
import org.apache.cordova.DroidGap;
import android.os.Bundle;
import android.view.WindowManager;
public class BDH extends DroidGap
{
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
// Set by <content src="index.html" /> in config.xml
getWindow().setFlags(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN, WindowManager.LayoutParams.SOFT_INPUT_MASK_ADJUST);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
super.loadUrl(Config.getStartUrl());
//super.loadUrl("file:///android_asset/www/index.html")
final View activityRootView = ((ViewGroup) findViewById(android.R.id.content)).getChildAt(0);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout()
{
// r will be populated with the coordinates of your view that area still visible.
Rect r = new Rect();
activityRootView.getWindowVisibleDisplayFrame(r);
int heightDiff = activityRootView.getRootView().getHeight() - (r.bottom - r.top);
// If more than 100 pixels, its probably a keyboard...
if (heightDiff > 100)
{
// Fire off a function to the JavaScript.
this.sendJavascript("try { onKeyboardShowing(); } catch (e) {};");
}
}
});
}
}
因此，当显示键盘时，您可以向JavaScript激活一个功能，表示正在显示键盘，然后您可以调整屏幕：
var fieldFocused = null;
function onKeyboardShowing()
{
if(fieldFocused != null)
{
$('body').scrollTo(fieldFocused, 500, {offset:-50});
}
}
$(document).on('focus', 'input, textarea', function() {
fieldFocused = $(this);
});
$(document).on('blur', 'input, textarea', function() {
fieldFocused = null;
});
原始回答
我们在尝试修复覆盖输入字段的Android软键盘时遇到了可怕的时间。我提出的解决方案绝不是“好”，但它有效......
您需要jQuery以及另一个名为jQuery.ScrollTo的jQuery插件，由Ariel Flesher找到here。
现在将其添加到JavaScript：
var fieldFocused = null;
$(window).resize(function(e) {
if(fieldFocused != null)
{
$('body').scrollTo(fieldFocused, 500, {offset:-50});
}
});
$(document).on('focus', 'input, textarea', function() {
fieldFocused = $(this);
});
$(document).on('blur', 'input, textarea', function() {
fieldFocused = null;
});
当textarea / input进入焦点时，DOM元素被赋值给变量。调整窗口大小时，窗口会滚动以将DOM元素置于顶部。
我们在Android清单中使用了android：windowSoftInputMode =“adjustResize”。
正如我所说，这不是最优雅的修复，但我们已经在我们的PhoneGap应用程序中实现了它的工作原理。
答案 1 :(得分：2)
虽然可能不是更好的解决方法，但我找到了解决方案。检测事件并与JS沟通不适用于我，无论是window.scrollTo还是jQuery插件。不幸的是，我的时间很短，我更喜欢直接用Java做。至于我有时间，我将重构它并开发基于此解决方案的插件。随着代码的更新，我也会在这里更新它。在这里：
/**
*
* Due to a well known bug on Phonegap¹, android softKeyboard adjustPan functionality wasn't working
* as expected when an input field recieved focus. The common workaround(Change to adjustResize and),
* however, was not applicable, due to an Android bug² that crashes fullscreen apps when in adjustResize mode.
* This is an workaround, to detect when the softKeyboard is activated and then programatically scroll
* whenever it needs;
*
* During the development proccess i came across an annoying behavior on android, that were making the
* input field dispatch onFocusChange twice when focus was cleared, when it should dispatch only once.
* The first one, without focus(Expected behavior), the second one WITH focus(Dafuq?), causing it to
* not scroll back on blur. My workaround was to only enable it to set a flag(lostFocus parameter), and
* only allow the method to calculate the scroll size IF the element had not lost it's focus;
*
* ¹ - http://stackoverflow.com/questions/11968420/softkeyboard-in-phonegap-covers-input-elements
* ² - http://stackoverflow.com/questions/7417123/android-how-to-adjust-layout-in-full-screen-mode-when-softkeyboard-is-visible
**/
final View activityRootView = ((ViewGroup) findViewById(android.R.id.content)).getChildAt(0);
activityRootView.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
@Override
public void onGlobalLayout(){
View focused = appView.findFocus();
activityRootView.getWindowVisibleDisplayFrame(r);
if(focused instanceof TextView){
if(focused.getOnFocusChangeListener() == null){
focused.setOnFocusChangeListener(new OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
if(!hasFocus){
activityRootView.scrollTo(0,0);
lostFocus = true;
showKeyBoard = false;
}else{
showKeyBoard = true;
}
}
});
}
/**
*
* Really tricky one to find, that was the only way i found to detect when this listener call came from
* the buggy input focus gain. If the element had lost its focus, r(A Rect representing the screen visible area)
* would be the total height, what means that there would be no keyboard to be shown, as far as the screen
* was completely visible.
*
**/
if(showKeyBoard || r.top != activityRootView.getHeight()){
int heightDiff = 0;
int keyBoardSize = 0;
int scrollTo = 0;
heightDiff = activityRootView.getRootView().getHeight() - focused.getTop();
keyBoardSize = activityRootView.getRootView().getHeight() - r.bottom;
if((keyBoardSize < focused.getBottom() && keyBoardSize > 0) && !lostFocus){
scrollTo = focused.getBottom() - keyBoardSize;
}
if(scrollTo == 0){
activityRootView.scrollTo(0,scrollTo);
lostFocus = false;
showKeyBoard = true;
}else if(heightDiff < r.bottom){
activityRootView.scrollTo(0, scrollTo);
lostFocus = false;
showKeyBoard = false;
}
}
}
}
});
详细介绍r，lostFocus和showKeyboard
r 是一个Rect对象，由 getWindowVisibleDisplayFrame(Rect r)
方法填充来自文档：
检索窗口中的整体可见显示大小 视图附加到已被定位。这考虑到了 窗户上方的屏幕装饰，适用于窗户的两种情况 它本身就位于它们内部或正在放置窗口 在那时和覆盖的插图被用于窗口定位它 里面的内容。 实际上，这会告诉您可用的区域 内容可以放置并保持对用户可见。
因此，如果显示键盘， r.bottom 将与rootView高度不同。
showKeyboard 和 lostFocus 是两种解决方法，可以可靠地获得正确的焦点/模糊行为。 showKeyboard 很简单，只有一个标志来告诉应用程序它应该或不应该滚动。从理论上说，它是有效的，然而，我遇到了一个恼人的错误，导致输入字段在失去焦点后立即聚焦，在软键盘隐藏之前（仅在应用程序内部，在设备上，元素没有'获得焦点，键盘已经隐藏了）。为了解决这个问题，我已经使用lostFocus告诉应用程序什么时候它确实失去了焦点，并且只允许它计算元素没有失去焦点时的滚动位置。
答案 2 :(得分：0)