PhoneGap：Android软键盘涵盖了输入字段

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();
    }
}

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