ios 如何使用phonegap防止键盘在iOS应用程序中向上推网页视图

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13820088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 21:30:02  来源:igfitidea点击:

How to prevent keyboard push up webview at iOS app using phonegap

ioscordovawebviewkeyboard

提问by Yajap

When an input field at bottom of the screen has focus, the keyboard pushes up my webview and the upper part of the page is not visible anymore.

当屏幕底部的输入字段获得焦点时,键盘会向上推我的 webview,页面的上部不再可见。

I want to prevent the keyboard pushing up the webview.

我想防止键盘推高 webview。

Anyone has an idea ?

有人有想法吗?

回答by Jonathan

On focus, set window.scrollTo(0,0);This prevents keyboard from pushing up webview completely

在焦点上,设置window.scrollTo(0,0); 这可以防止键盘完全推高 webview

$('input').on('focus', function(e) {
    e.preventDefault(); e.stopPropagation();
    window.scrollTo(0,0); //the second 0 marks the Y scroll pos. Setting this to i.e. 100 will push the screen up by 100px. 
});

If you don't want to set a static valuefor your Y scroll position, feel free to use this short plugin I've written that automatically aligns the keyboard underneath the input field. It's not perfect, but it does the job. Just call this on focus as shown above:

如果您不想为 Y 滚动位置设置静态值,请随意使用我编写的这个简短插件,它会自动将键盘对齐输入字段下方。它并不完美,但它可以完成工作。只需将其称为焦点,如上所示:

setKeyboardPos(e.target.id);

回答by capitannaranja

Solved this issue using driftyco/ionic-plugins-keyboard(https://github.com/driftyco/ionic-plugins-keyboard)

使用driftyco/ionic-plugins-keyboard( https://github.com/driftyco/ionic-plugins-keyboard)解决了这个问题

First install keyboard plugin:

首先安装键盘插件:

cordova plugin add com.ionic.keyboard

Now you can I)either disable native keyboard scrolling:

现在你可以我)要么禁用本机键盘滚动:

cordova.plugins.Keyboard.disableScroll(true);

or II)listen on native.keyboardshowevent in devicereadyand scroll back to top when keyboard shows:

II)监听native.keyboardshow事件deviceready并在键盘显示时滚动回顶部:

window.addEventListener('native.keyboardshow', keyboardShowHandler);

function keyboardShowHandler(e){
    setTimeout(function() {
        $('html, body').animate({ scrollTop: 0 }, 1000);
    }, 0);
}

I used the II) approach because I liked the animated scrolling in my case. If you don't want to go with the animation replace the corresponding line with window.scrollTo(0, 0);. But I'm afraid that in that case you will again have to deal with this "litter jitter animation" Imskullwrote about.

我使用了 II) 方法,因为我喜欢我的案例中的动画滚动。如果您不想使用动画,请将相应的行替换为window.scrollTo(0, 0);. 但恐怕在那种情况下,您将不得不再次处理Imskull所写的这种“垃圾抖动动画” 。

回答by Athinodoros Sgouromallis

I had the same problem and none of the solutions above helped me but I found a simple way to go past it.

我遇到了同样的问题,上面的解决方案都没有帮助我,但我找到了一种简单的方法来解决它。

In the platform/android folder open the manifest.xml and in the main activity tag replace the android:windowSoftInputMode="adjustResize" attribute with android:windowSoftInputMode="adjustPan"

在 platform/android 文件夹中打开 manifest.xml 并在主活动标记中将 android:windowSoftInputMode="adjustResize" 属性替换为 android:windowSoftInputMode="adjustPan"

now the keyboard will overlay your content.

现在键盘将覆盖您的内容。

I hope it will help someone.

我希望它会帮助某人。

回答by Ravi Ranjan

make sure of this in your config.xml

在你的 config.xml 中确保这一点

<preference name="KeyboardShrinksView" value="true" />

回答by code_love

I LITERALLY WENT THROUGH 100 answers before I had to find answer myself. so here it is how to disable scroll of UI on IOS. simply when cordova is loading, add this. Please install:

在我不得不自己找到答案之前,我实际上已经浏览了 100 个答案。所以这里是如何在 IOS 上禁用 UI 滚动。只需在加载cordova时,添加这个。请安装:

cordova plugin add ionic-plugin-keyboard --save

and then do cordova prepareto load this new plugin in your www folder.

然后cordova prepare在您的 www 文件夹中加载这个新插件。

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

And that's it. Please let me know if this was helpful. I will be glad to answer more.

就是这样。请让我知道这是否有帮助。我很乐意回答更多。

回答by sergej

Adding this option to the config.xmldid the trick for me.

将此选项添加到config.xml对我有用。

<preference name="KeyboardShrinksView" value="true" />

It has been removed in Cordova 3.2.0but is available in cordova-plugin-keyboard.

它已在Cordova 3.2.0 中删除,但在cordova-plugin-keyboard 中可用。

You need to install this plugin and this option will work again

您需要安装此插件,此选项将再次起作用

cordova plugin add cordova-plugin-keyboard