Phonegap Android 键盘覆盖输入元素滚动被禁用

Phonegap Android keyboard covers input elements scrolling is disabled

提问by cohenadair

I've tried many different solutions and nothing is quite what I want. What I want is for the keyboard to show on top of the content (keeping the content the same size) while being able to scroll to input elements that are covered by the keyboard.

我尝试了许多不同的解决方案，但没有什么是我想要的。我想要的是让键盘显示在内容的顶部（保持内容大小相同），同时能够滚动到键盘覆盖的输入元素。

Every solution I've tried will either give me one or the other, but not both.

我尝试过的每个解决方案都会给我一个或另一个，但不能同时给我一个。

Solutions I've tried:

我尝试过的解决方案：

• Solution here. Adding android:windowSoftInputMode="adjustPan" and android:configChanges="orientation|keyboardHidden" to the main activity in my AndroidManifest.xml.
• The above solution using "adjustResize" instead of "adjustPan".
• Solution here. Adding to my confix.xml.

• 解决方法在这里。将 android:windowSoftInputMode="adjustPan" 和 android:configChanges="orientation|keyboardHidden" 添加到我的 AndroidManifest.xml 中的主要活动。
• 上述解决方案使用“adjustResize”而不是“adjustPan”。
• 解决方法在这里。添加到我的 confix.xml。

Using adjustPan keeps my elements the same size, but disables scrolling. Using adjustResize resizes the entire page, making everything miniature. Keeping default settings, only the wrapper containing the input elements is resized, but scrolling is enabled.

使用 adjustPan 使我的元素保持相同的大小，但禁用滚动。使用 adjustResize 调整整个页面的大小，使所有内容都缩小。保持默认设置，只调整包含输入元素的包装器的大小，但启用滚动。

I managed to find the exact same problem (unanswered) here. They were able to "fix" it by resizing their app to 150% and scroll to the covered input element, but like they said it's not ideal.

我设法找到完全相同的问题（解答）这里。他们能够通过将应用程序大小调整为 150% 并滚动到覆盖的输入元素来“修复”它，但就像他们说的那样并不理想。

Any help is appreciated.

任何帮助表示赞赏。

采纳答案by Sameera R.

For most of the cases in config.xml change the full screen preference to false. that'll do the trick.

对于 config.xml 中的大多数情况，请将全屏首选项更改为 false。这样就行了。

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

回答by Biswas Khayargoli

I have the most efficient solution to scroll into input automatically and make it visible. First you need to add the ionic keyboard plugin (works on any cordova project) because the eventlistener 'showkeyboard' does not work now.

我有最有效的解决方案来自动滚动输入并使其可见。首先，您需要添加 ionic 键盘插件（适用于任何cordova 项目），因为 eventlistener 'showkeyboard' 现在不起作用。

cordova plugin add ionic-plugin-keyboard --save

Then on your event handler of 'keyboardshow' event add the following code:

然后在“keyboardshow”事件的事件处理程序上添加以下代码：

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

P.S: This is supported only on Android (Chrome) and Safari. :D

PS：这仅在 Android (Chrome) 和 Safari 上受支持。:D

回答by katmanco

I had the same problem for android project output and in my situation the input elements were not moving upwards the keyboard . And after a-night-taking search (including those config changes and others) I found that in my angularjs cordova project

我对 android 项目输出有同样的问题，在我的情况下，输入元素没有向上移动键盘。经过一夜的搜索（包括那些配置更改和其他），我在我的 angularjs cordova 项目中发现了这一点

StatusBar.overlaysWebView(true);
StatusBar.hide();

lines which are in my controller causing that annoying problem . And I was using those lines for ios statusbar issues now I took those in an if condition and the problem is fixed.

我的控制器中的线路导致了那个烦人的问题。我将这些行用于 ios 状态栏问题，现在我将它们置于 if 条件下，问题已解决。

if( device.platform=="iOS")
  {
   StatusBar.overlaysWebView(true);
   StatusBar.hide();
  }

回答by dianakarenms

You can detect focused textareaor input, then wait a while until keyboard is shown and finally scroll the page to reach focused input.

您可以检测焦点textarea或input，然后等待一段时间直到显示键盘，最后滚动页面以到达焦点输入。

$("#textarea").focus(function(e) {
    var container = $('#container'),
        scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    }), 500);

});

When keyboard is hidden the textareakeeps focused, so if it's clicked again the keyboard will show and the container needs to scroll again to show the input

当键盘被隐藏时textarea保持焦点，所以如果再次点击键盘将显示并且容器需要再次滚动以显示输入

$("#textarea").click(function(e) {
    e.stopPropagation();
    var container = $('#container'), //container element to be scrolled, contains input
        scrollTo = $('#textarea');

    setTimeout((function() {
        container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
        });
    }), 500);
});

Hope this helps, cheers!

希望这有帮助，干杯！

回答by Greg L

I added an event listener for the keyboard event and scrolled to the input only if it was off screen.

我为键盘事件添加了一个事件侦听器，并且仅当它在屏幕外时才滚动到输入。

For my case I only wanted to scroll when the keyboard was being shown for the first time, and only if the input item was offscreen.

就我而言，我只想在第一次显示键盘时滚动，并且仅当输入项在屏幕外时才滚动。

document.addEventListener('showkeyboard', onKeyboardShow, false);


 function onKeyboardShow(e) {        
    setTimeout(function() {
      e.target.activeElement.scrollIntoViewIfNeeded()
    }, 500) //needed timeout to wait for viewport to resize
  }

To get the showkeyboard event to fire I needed to have the following in my AndroidManifest.xml

要触发 showkeyboard 事件，我需要在 AndroidManifest.xml 中包含以下内容

  android:windowSoftInputMode="adjustResize"

回答by Kshitij Tiwari

I was also facing the same issue as it is a framework related issue. I have found work around-

我也面临着同样的问题，因为它是一个与框架相关的问题。我找到了工作 -

constructor(
        private platform: Platform,
        private keyboard: Keyboard
      ) {
        if(this.platform.is('android')){
          this.keyboard.onKeyboardShow().subscribe((e) => {
             var keyboardHeight = e.keyboardHeight;
             keyboardHeight = keyboardHeight ? keyboardHeight : '337';
             $('body').css('height', 'calc(100vh - ' + keyboardHeight + 'px)');    
      });

      this.keyboard.onKeyboardHide().subscribe(e => {
       $("body").css("height", "100vh");
      });
    }
}

I have used 337 which is keyboard height for default, mainly for that condition if keyboard height in not available.

我使用了 337，这是默认的键盘高度，主要用于键盘高度不可用的情况。

library needed:

需要的库：

    npm install jquery
    npm install @types/jquery
    ionic cordova plugin add cordova-plugin-ionic-keyboard
    npm install @ionic-native/keyboard

imports

进口

    import { Platform } from '@ionic/angular';
    import * as $ from "jquery";
    import { Keyboard } from '@ionic-native/keyboard/ngx';

回答by Luke Snowden

I came up with this solution. I have a full screen Vuejs application which the container has the height of the screen height and then absolute positioned to the bottom, left and right to fix the same sort of issue on IOS.

我想出了这个解决方案。我有一个全屏 Vuejs 应用程序，其中容器具有屏幕高度的高度，然后绝对定位到底部、左侧和右侧以修复 IOS 上的同类问题。

I then had the same issue on Android so came up with the following;

然后我在 Android 上遇到了同样的问题，所以想出了以下内容；

window.cordovaPluginIonicKeyboardShift = function()
{
    /** This is my container (Vuejs instance) **/
    const inst = document.querySelector('#app');

    /** Get the height of the document **/
    const height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

    /** Where we will store the active input **/
    let input;

    /** The keyboard displaying is around 200 milliseconds **/
    inst.style.transition = 'transform 0.2s';

    /** Makes me feel better having this on to increase performance **/
    inst.style.transform = 'translateZ(0)';

    /**
     * Set Input
     * @param e
     */
    let setInput = function(e) {
        input = e.target;
    };

    /**
     * On Keyboard Show
     * @param event
     */
    let onKeyboardShow = function(event) {
        let offset = input.getBoundingClientRect();
        if(offset.top + input.clientHeight > height - event.keyboardHeight) {
            inst.style.transform = `translateZ(0) translateY(-${event.keyboardHeight}px)`;
        }
    };

    /**
     * OnKeyboard Hide
     */
    let onKeyboardHide = function() {
        inst.style.transform = `translateZ(0) translateY(0px)`;
    };

    /**
     * Hide Keyboard
     * @param e
     */
    let hideKeyboard = function(e) {
        if(e.target.tagName.toLowerCase() !== 'input' && e.target.tagName.toLowerCase() !== 'textarea') {
            if(typeof input !== 'undefined') input.blur();
            if(Keyboard.isVisible) Keyboard.hide();
        }
    };

    /**
     * Go through all inputs and textarea's on document and attach touchstart
     * event. Using touchstart to define the input before focus which is what will trigger
     * the keyboard.
     */
    inst.querySelectorAll('input, textarea').forEach(function(elm) {
        elm.removeEventListener('touchstart', setInput, false);
        elm.addEventListener('touchstart', setInput, false);
    });

    /**
     * Need to get the height to shift the document up by x amount
     */
    window.removeEventListener('keyboardWillShow', onKeyboardShow, false);
    window.addEventListener('keyboardWillShow', onKeyboardShow, false);

    /**
     * Shift it back down on keyboard hiding
     */
    window.removeEventListener('keyboardWillHide', onKeyboardHide, false);
    window.addEventListener('keyboardWillHide', onKeyboardHide, false);

    /**
     * Some browsers/phone models act odd when touching off the input
     * so this is in to cover all bases
     */
    document.removeEventListener('touchstart', hideKeyboard, false);
    document.addEventListener('touchstart', hideKeyboard, false);

};

It also turns out even installing the plugin has affected the normal use of the keyboard which is why the hidemethod is called as the keyboard doesn't go away without it.

事实证明，即使安装插件也会影响键盘的正常使用，这hide就是调用该方法的原因，因为没有它键盘不会消失。

Then on my Vuejs instances I have the following updatedmethod;

然后在我的 Vuejs 实例上，我有以下updated方法；

updated: function () {
    this.$nextTick(function () {
        cordovaPluginIonicKeyboardShift();
    })
},

You'll also need to add this plugin;

你还需要添加这个插件；

phonegap cordova plugin add cordova-plugin-ionic-keyboard

phonegap cordova plugin add cordova-plugin-ionic-keyboard

Doing the above I have a successfully working fullscreen app with a working keyboard.

执行上述操作，我有一个成功运行的全屏应用程序，并带有一个可用的键盘。

If you find yourself testing on Xcode Simulator and the keyboard is not showing, go to Simulator -> Device -> Erase all content and settingsand re-install the app. No idea why this occurs but this will save you a lot of head aches.

如果您发现自己在 Xcode Simulator 上进行测试并且没有显示键盘，请转到Simulator -> Device -> Erase all content and settings并重新安装该应用程序。不知道为什么会发生这种情况，但这会为您节省很多头痛。

Hope this helps someone

希望这有助于某人

回答by Behandelcoach

I am using the Cordova plugin 'ionic-plugin-keyboard' and listen to the 'native.keyboardshow' and 'native.keyboardhide' events to resize the HTML container element of my form:

我正在使用 Cordova 插件 'ionic-plugin-keyboard' 并收听 'native.keyboardshow' 和 'native.keyboardhide' 事件来调整表单的 HTML 容器元素的大小：

    window.addEventListener('native.keyboardshow', function (e) {
        container.style.bottom = e.keyboardHeight + "px";
    });

    window.addEventListener('native.keyboardhide', function () {
        container.style.bottom = null;
    });

This results in the proper input fields to scroll into view (also when tabbing back and forward between the fields.

这会导致正确的输入字段滚动到视图中（也在字段之间前后切换时也是如此。

回答by cohenadair

I figured out the problem. I have a media query in my CSS where the size of certain elements change for smaller screen sizes. Editing that query fixed my problem.

我解决了这个问题。我的 CSS 中有一个媒体查询，其中某些元素的大小会随着较小的屏幕尺寸而变化。编辑该查询解决了我的问题。

回答by pianista

If you have made correctly the project as Cordova documentation says, It won't happen.

如果您按照 Cordova 文档正确制作了项目，则不会发生。

May be are you using a scroll library like iScroll?

可能你在使用像 iScroll 这样的滚动库吗？