PhoneGap：安卓软键盘覆盖输入字段

Question

我正在使用的 PhoneGap 应用程序出现问题。我的应用程序有很多表单，因为该应用程序的目标主要是为数据库提供一个漂亮的用户界面。但是，每当用户尝试编辑靠近底部的输入字段时，Android 键盘就会弹出并覆盖该字段，从而使用户看不到他/她正在写的内容。

您知道是否有解决方法吗？有没有人在他们的应用中遇到过这个问题？

Answer 1

在这种情况下你可以做什么（当我遇到这个问题时我做了什么......）：在字段上添加焦点事件，并向上滚动文档。所以你会在页面顶部看到输入字段:)

Answer 2

我同意 Paulius 的观点，对于 Android，我发现这是最干净的解决方案。 我知道这是一个老问题，但如果有人仍然面临这个问题，我会与其他人分享我的解决方案。

// fix keyboard hiding focused input texts
// using native keyboard plugin and move.min.js
// https://github.com/vitohe/ionic-plugins-keyboard/tree/f94842fec1bacf72107083d2e44735e417e8439d
// http://visionmedia.github.io/move.js/
// not tested on iOS so implementation is for Android only
if ($cordovaDevice.getPlatform() === "Android") {
    // device is running Android
    // attach showkeyboard event listener 
    // which is triggered when the native keyboard is opened
    window.addEventListener('native.showkeyboard', keyboardShowHandler);

    // native.showkeyboard callback
    // e contains keyboard height
    function keyboardShowHandler(e) {
        // get viewport height
        var viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
        // get the maximum allowed height without the need to scroll the page up/down
        var scrollLimit = viewportHeight - (document.activeElement.offsetHeight + document.activeElement.offsetTop);

        // if the keyboard height is bigger than the maximum allowed height
        if (e.keyboardHeight > scrollLimit) {
            // calculate the Y distance
            var scrollYDistance = document.activeElement.offsetHeight + (e.keyboardHeight - scrollLimit);
            // animate using move.min.js (CSS3 animations)
            move(document.body).to(0, -scrollYDistance).duration('.2s').ease('in-out').end();
        }
    }

    window.addEventListener('native.hidekeyboard', keyboardHideHandler);

    // native.hidekeyboard callback
    function keyboardHideHandler() {
        // remove focus from activeElement 
        // which is naturally an input since the nativekeyboard is hiding
        document.activeElement.blur();
        // animate using move.min.js (CSS3 animations)
        move(document.body).to(0, 0).duration('.2s').ease('in-out').end();
    }
}

最终的结果令人难以置信的顺利。