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

Question

使用适用于Android和iOS的Phonegap 3.6.3创建移动应用程序.问题仅适用于Android,因为iOS会按照我的意愿行事.

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

这些页面放在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

我也有同样的问题 - 看起来潜在的问题是你不能用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 2

我的解决方案是使用Ionic键盘插件并实现此代码:

HTML:

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

CSS:

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

使用Javascript:

• 当keyborad打开时

      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 3

从 config.xml 中删除此行

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

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

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