如何使用phonegap防止键盘在iOS应用程序中推送webview

Question

当屏幕底部的输入字段具有焦点时,键盘会向上推动我的webview,并且页面的上半部分不再可见.

我想阻止键盘推高webview.

有人有想法吗？

Answer 1

在焦点上,设置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. 
});

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

setKeyboardPos(e.target.id);

Answer 2

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

首先安装键盘插件:

cordova plugin add com.ionic.keyboard

现在您可以I)禁用本机键盘滚动:

cordova.plugins.Keyboard.disableScroll(true);

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

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

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

我使用了II)方法,因为我喜欢我的情况下的动画滚动.如果你不想用动画替换相应的行window.scrollTo(0, 0);.但是我担心在这种情况下你将再次处理Imskull所写的"垃圾抖动动画" .