Question

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

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

我尝试过的解决方案：

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

使用adjustPan可以保持我的元素大小相同，但禁用滚动。使用adjustResize调整整个页面的大小，使一切变得微小。保持默认设置，仅调整包含输入元素的包装器的大小，但启用滚动。

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

感谢任何帮助。

Answer 1

对于config.xml中的大多数情况，将全屏首选项更改为false。那就是诀窍。

var offset, 
    max = 10, 
    str = '', 
    counter = document.getElementById('counter');

for(var i = 0; i < (max * max); i++){
  offset = ((max + i) % max);
  str += (max - offset)+"<br/>";
}

counter.innerHTML = str;

Answer 2

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

cordova plugin add ionic-plugin-keyboard --save

然后在'keyboardshow'事件的事件处理程序中添加以下代码：

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

P.S：仅在Android（Chrome）和Safari上支持此功能。：d

Answer 3

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

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

我控制器中的行导致了这个恼人的问题。我正在使用这些行来处理ios状态栏问题，现在我将这些行用于if条件并解决了问题。

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

Answer 4

您可以检测到焦点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);

});

当键盘被隐藏时，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);
});

希望这有帮助，欢呼！

Answer 5

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

对于我的情况，我只想在第一次显示键盘时滚动，并且仅在输入项目在屏幕外时才滚动。

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


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

要启动showkeyboard事件，我需要在AndroidManifest.xml

中包含以下内容

  android:windowSoftInputMode="adjustResize"

Answer 6

我也面临着与框架相关的问题。我发现周围有工作-

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

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

需要的库：

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

进口

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

Answer 7

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

然后我在Android上遇到了同样的问题，因此提出了以下建议；

main()

事实证明，即使安装插件也影响了键盘的正常使用，这就是调用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); };方法的原因，因为没有它键盘就无法消失。

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

updated

您还需要添加此插件；

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

执行上述操作后，我有一个运行正常的全屏应用程序，并且键盘正常工作。

如果您发现自己在Xcode Simulator上进行了测试，但键盘未显示，请转到phonegap cordova plugin add cordova-plugin-ionic-keyboard，然后重新安装该应用程序。不知道为什么会这样，但这会为您节省很多头疼。

希望这对某人有帮助

Answer 8

我正在使用Cordova插件＆＃39; ionic-plugin-keyboard＆＃39;并听取“native.keyboardshow＆＃39;和＆＃39; native.keyboardhide＆＃39;调整表单的HTML容器元素的事件：

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

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

这会导致正确的输入字段滚动到视图中（也就是在字段之间向后和向前跳转时。

Answer 9

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

Answer 10

如果您已正确完成了Cordova文档所说的项目，那就不会发生。

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

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

10 个答案: