当软键盘出现在 phonegap 中时隐藏输入字段

Question

使用 Phonegap 3.6.3 为 Android 和 iOS 创建移动应用程序。问题仅针对 Android，因为 iOS 就像我希望的那样。

当我单击输入文本字段或文本区域时，会出现一个软键盘。它有时会涵盖这些元素。

页面位于底部的 iScroll 中，另一个绝对放置 div，因此一旦屏幕弹出，我无法滚动到其中任何一个。我怀疑当键盘出现时我必须将 webview 更改为更小。然而，在尝试了很多东西之后，它仍然没有用。

config.xml

    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.5.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="false" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="false" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="false" />
    <preference name="auto-hide-splash-screen" value="false" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="13" />
    <preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />
    <preference name="android-installLocation" value="auto" />
    <preference name="SplashScreen" value="splash" />

（已经为 android-windowSoftInputMode 尝试了许多不同的值，如下例所示）

    <preference name="android-windowSoftInputMode" value="stateVisible|adjustResize|adjustPan" />

网页头

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

（是的，我也尝试过很多其他的东西）

您可能认为相关的任何其他内容，请告诉我。不幸的是，我不能随意分享太多代码，但据我了解，这就是我们需要担心的全部内容。

谢谢，

Answer 1

从 config.xml

中删除这一行

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />

并将 'head of web page' 中的行更改为

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

Answer 2

我也遇到了同样的问题 - 潜在的问题似乎是您无法使用 cordova Build 编辑 androidManifest 文件。您所能做的就是编辑 config.xml 文件，该文件实际上只允许您更改有限的设置子集。我想要的是能够更改 windowSoftInputMode.

我确实找到了解决问题的方法。这是键盘出现在屏幕底部的字段上，我认为这与您遇到的问题相同。我用过 cordova 2.9.0 和 cordova 3.6.0

解决方案 1： 我找到的解决方案是在 config.xml

中更改此设置

<preference name="fullscreen" value="false" />

将设置设置为 "false" 而不是 "true" - 页面现在向上滚动以在键盘打开时显示您正在编辑的字段。（更准确地说，我相信 viewport 会发生变化而不是向上滚动。希望你在视口部分是正确的）

解决方案 2： 尝试从 config.xml

中删除或替换此行

<preference name="android-windowSoftInputMode" value="adjustResize|stateHidden" />

作为

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/>

相反。这现在对我有用。

解决方案 3：尝试将此样式添加到您的页面

<style> <item name="android:windowTranslucentStatus">true</item></style>

编辑：

如果您正在使用 jQuery，您可以尝试一下。

$('input, textarea, button, a, select').off('touchstart mousedown').on('touchstart mousedown', function(e) {
    e.stopPropagation();
});

Answer 3

我的解决方案是使用 Ionic keyboard plugin 并实现此代码：

HTML:

<div id="page" class="page-content">
    ...         
</div>

CSS:

.page-content {    
height: 100%;
overflow: auto;}

Javascript:

当键盘打开时

    window.addEventListener('native.keyboardshow', function (e) {
    var deviceHeight = window.innerHeight;
    var keyboardHeight = e.keyboardHeight;
    var deviceHeightAdjusted = deviceHeight - keyboardHeight;//device height adjusted
    deviceHeightAdjusted = deviceHeightAdjusted < 0 ? (deviceHeightAdjusted * -1) : deviceHeightAdjusted;//only positive number
    document.getElementById('page').style.height = deviceHeightAdjusted + 'px';//set page height
    document.getElementById('page').setAttribute('keyBoardHeight', keyboardHeight);//save keyboard height
});

键盘关闭时

    window.addEventListener('native.keyboardhide', function (e) {
    setTimeout(function () {
        document.getElementById('page').style.height = 100 + '%';//device  100% height
    }, 100);

为了提供更好的用户体验，请为所有输入添加此代码

var inputs = document.querySelectorAll('input');//select all input
var n = inputs.length;
for (var i = 0; i < n; i++) {
    var input = inputs[i];
    input.addEventListener('focus', function (e) {//add event focus
        var inp = this; 
       //wait 0.6 seconds to scroll down to the input has focus
        setTimeout(function () {
            try {
                //if the keyboard is open
                if (cordova.plugins.Keyboard.isVisible) {
                    var padding = 15;
                    var targetPosition = parseInt($$(inp).offset().top + padding);
                    var keyboardHeight = parseInt(document.getElementById('page').getAttribute('keyBoardHeight'));//get keyboard height   

                    //if the input is hidden by the keyboard,scroll to the input 
                    if (targetPosition >= keyboardHeight) {
                        padding *=5;
                        document.getElementById('page').scrollTop = targetPosition - padding;
                    }
                }
            } catch (ex) {
                alert(ex.message);
            }
        }, 600);
    }, true);

Answer 4

只有一种解决方案适用于我的全屏应用程序，它是添加到 Cordova 应用程序 ionic-plugin-keyboard 插件

cordova plugin add com.ionic.keyboard

JS代码：

// This event fires when the keyboard will hide
window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    $("body").addClass("keyboardOn");
}

// This event fires when the keyboard will show
window.addEventListener('native.keyboardhide', keyboardHideHandler);

function keyboardHideHandler(e){
    $("body").removeClass("keyboardOn");
}

之后您可以使用 CSS 调整视图。

参考：

Answer 5

我有最有效的解决方案来自动滚动到输入并使其可见。首先，您需要添加@Fedir 提到的键盘插件（cordova plugin add com.ionic.keyboard）。然后在 'keyboardshow' 事件的事件处理程序上添加以下代码：

window.addEventListener('native.keyboardshow', function(e){ 
    setTimeout(function() {
        document.activeElement.scrollIntoViewIfNeeded();
    }, 100);
});

P.S：仅在 Android (Chrome) 和 Safari 上受支持。 :D

Answer 6

我的应用使用 Android 全屏/身临其境模式。我已经通过在键盘 appears/disappears 时切换模式来解决它。

我已经安装了 cordova-plugin-fullscreen 和 ionic-plugin-keyboard 插件并添加了这段代码：

document.addEventListener('deviceready', 
  function(){
    // disable immersive mode  on Android when keyboard is shown
        try {
      if (cordova.platformId == 'android') {
        AndroidFullScreen.immersiveMode(false, false);
        window.addEventListener('native.keyboardshow', function (e) {
          AndroidFullScreen.showSystemUI(false, false);

        });
        window.addEventListener('native.keyboardhide', function (e) {
          AndroidFullScreen.immersiveMode(false, false);
        });
      }
    } catch (error) {
      console.log('deviceready - ' + error);
    }
}, false);

Answer 7

我正在使用 Ionic Keyboard Plugin 来检测键盘何时打开并相应地向正文添加必要的填充：

phonegap plugin add ionic-plugin-keyboard --save

当事件触发时，您可以调整主体上的 padding-bottom 以匹配键盘的高度。

然后，为了检测焦点元素是否可见，您必须计算并在必要时滚动容器。我使用的最终代码如下：

cordova.plugins.Keyboard.disableScroll(true);
$$(window).on('native.keyboardshow', function(e) {
    $$('body').css('padding-bottom', e.keyboardHeight + 'px');

    var el = $$('input:focus, textarea:focus');
    var content = el.closest('.page-content');
    var offset = el.offset().top + content.scrollTop();
    /* 15 is an arbitrary value to add a bit of padding */
    var safeAreaHeight = el.outerHeight(true) + 15;
    var maxPosition = content.height() - safeAreaHeight;
    if (content.scrollTop() < (offset - maxPosition)) {
            content.scrollTop(offset - maxPosition);
    }

});
$$(window).on('native.keyboardhide', function(e) {
    $$('body').css('padding-bottom', 0);
});

该代码使用了 Framework7 及其与 jQuery 非常相似的 Dom7 库。它假定可滚动元素是 .page-content，但您可以相应地调整它。

您应该将 android-windowSoftInputMode 首选项保留为默认值。

Answer 8

只需将以下行添加到 config.xml 文件，就是这样..

<preference name="android-windowSoftInputMode" value="stateVisible|adjustResize"/>

当软键盘出现在 phonegap 中时隐藏输入字段

input field hidden when soft keyboard appears in phonegap

html

css

android

iscroll

cordova