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

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

PhoneGap：Android软键盘覆盖输入字段

2 个答案: