在PhoneGap中，当软键盘弹出时输入字段会被隐藏。

Question

在PhoneGap中，当软键盘弹出时输入字段会被隐藏。

androidhtmlcsscordovaiscroll

5

使用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" />

（是的，我也试过很多其他方法）

如果您认为任何其他相关信息，请告诉我。不幸的是，我不能分享太多代码，但据我所知，这就是我们需要担心的全部内容。

谢谢，

- Harry V

尝试在您的页面中添加 <style> <item name="android:windowTranslucentStatus">true</item> </style>。 - rajmathan

8个回答

7

我的解决方案是使用Ionic键盘插件并实现以下代码：

HTML：

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

CSS：

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

Javascript：

when keyborad is open

    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
});

when keyboard is closed

    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);

- Yonatan Alexis Quintero Rodrig

你在哪里设置ion-content的scroll=true？@Azmeer - darewreck

将事件监听器添加到所有元素和超时似乎有点低效。使用插件提供的两个事件就可以实现类似的效果，参见此答案。 - Andrea Lazzarotto

4

从config.xml文件中删除此行

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

将“网页头部”中的行更改为

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

- Mujeeb

谢谢@MJB，但可惜没有用。它使一些div滚动到了末尾，但页面仍然被软键盘挡住了很多。 - Harry V

1

我认为由于iscroll的原因，必须有所不同。iscroll的底部仍然在屏幕底部，因此我无法滚动到最底部。 - Harry V

谢谢你的帮助，我意识到当我输入时，它确实会调整Web视图以便关注我正在输入的位置 - 虽然不是理想的，但仍然有效，比完全隐藏要好！ - Harry V

1

我很高兴能够帮忙。是的，它会将页面向下滚动（即使那里没有空间），以便为键盘腾出空间，而不是让它覆盖输入字段。 - Mujeeb

2

我有一种最有效的解决方案，可以自动滚动到输入框并使其可见。首先，您需要添加键盘插件（cordova 插件添加com.ionic.keyboard），如 @Fedir 所述。然后，在“keyboardshow”事件的事件处理程序中添加以下代码：

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

附注：此功能仅支持 Android（Chrome）和 Safari。 :D

- Biswas Khayargoli

0

唯一一个对我全屏应用有效的解决方案就是将ionic-plugin-keyboard插件添加到Cordova应用程序中。

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调整视图。

参考：https://dev59.com/jGAg5IYBdhLWcg3wjbZt#25823491

- Fedir RYKHTIK

Fedir，请与我们分享CSS。 - Azmeer

@Azmeer 通常情况下，您不需要CSS，只需要插件和JS代码。 - Fedir RYKHTIK

0

我的应用程序使用了Android全屏/沉浸模式。我通过在键盘出现/消失时切换模式来解决了这个问题。

我安装了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);

- Stéphane

0

我正在使用Ionic键盘插件来检测键盘是否打开，并根据需要为页面主体添加必要的填充：

phonegap plugin add ionic-plugin-keyboard --save

当事件触发时，您可以调整 body 上的 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及其Dom7库，该库与jQuery非常相似。它假定可滚动元素为.page-content，但您可以根据需要进行调整。

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

- Andrea Lazzarotto

-1

只需将以下行添加到config.xml文件中即可。

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

- Nimesh khatri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- rajmathan · Accepted Answer

我也遇到了同样的问题 - 似乎根本问题在于你无法使用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会发生变化，而不是向上滚动。希望你在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();
});