Cordova android - 键盘覆盖输入字段

Posted 2023-05-06

【中文标题】Cordova android - 键盘覆盖输入字段

【英文标题】：Cordova android - Keyboard covering input fields

【发布时间】：2018-12-14 23:44:12

【问题描述】：

我知道这个问题已经被问过很多次了，但没有一个回答能提供解决方案。

<preference name="fullscreen" value="false" /> 这并不是真正的解决方案，因为我希望应用全屏显示。

配置文件选项似乎没有做任何事情。我试过了：

android:windowSoftInputMode="adjustPan"
android:windowSoftInputMode="adjustResize"
android:windowSoftInputMode="adjustResize|stateHidden"

滚动偏移也不起作用，因为没有空间可以滚动。

$('.myinput').focus(function(e) 
    var container = $('.container'),
    scrollTo = $('.myinput');

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

【问题讨论】：

"没有空间可以滚动"?? 为什么不能向下滚动显示内容？ 这显然是一个严重的 CSS 布局设计错误。首先修复它，然后您将看到 Android 如何自动滚动以显示您的输入字段。如果没有自动滚动，您可以动态向下滚动。

一点也不。无论页面高度如何，ios 和 Android 都会自动将输入滚动到视图中。 Android 多年来一直存在这个错误，但仍然没有修复。问题来自全屏模式。

【参考方案1】：

请安装：

cordova plugin add ionic-plugin-keyboard --save

然后让cordova准备在你的www文件夹中加载这个新插件。

document.addEventListener('deviceready', function(e)
    window.addEventListener('native.keyboardshow', function () 
            cordova.plugins.Keyboard.disableScroll(true);
        );
);

或者你可以试试这个javascript函数

<script>
      setInterval(function()
      if( document.body.className.match('keyboard-open') ) 
      document.getElementById("messagearea").style.marginBottom="100px";
      
                  else
                     document.getElementById("messagearea").style.marginBottom="0px";
                  

                  , 1000);

  </script>

【讨论】：

不幸的是，该插件的所有事件均未触发。