我正在开发一个版本为 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")
    }
}

最佳答案

更新

按照我最初的回答，下面的 JavaScript 将在 windowSoftInputMode="adjustResize" 上运行, 但是，它不适用于 "adjustPan"因为 JavaScript resize()显示键盘时不会触发事件。

但是，如前所述here ，您可以通过 Hook GlobalLayoutListener 在 Java 端捕获键盘显示事件进入ViewTreeObserver :

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 以及 Ariel Flesher 的另一个名为 jQuery.ScrollTo 的 jQuery 插件，发现 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;
});

当文本区域/输入成为焦点时，DOM 元素被分配给一个变量。调整窗口大小时，滚动窗口以将 DOM 元素带到顶部。

我们在 Android list 中使用了 android:windowSoftInputMode="adjustResize"。

正如我所说，这不是最优雅的修复，但我们已经在我们的 PhoneGap 应用程序中实现并且它有效。

关于android - Phonegap Android 应用程序未在键盘显示上调整平移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18599519/