Question

在我的cordova应用程序中显示android键盘时，我有一些内容/输入字段。我有 android:windowSoftInputMode="adjustPan"和<preference name="fullscreen" value="false" />

我尝试了android:windowSoftInputMode="adjustResize，但它一直在缩小我的内容，因为它正在调整窗口大小（我的内容根据视口宽度和视口高度调整大小）。谢谢你的任何建议！

Answer 1

所以我有一个自己的工作，可能会或可能不适合每个人，但我想我可以发布这个希望帮助遇到这个的人！

我找到了很多答案，但没有人真正帮助过我。因此，在我的AndroidManinfest.xml文件中，我设置了android:windowSoftInputMode="adjustPan|stateHidden"。是的，当它打开时，它仍将覆盖键盘下方的内容。

为了避免这种情况，我给出了所有受键盘影响的滚动视图，显示了类的inputScrollContainer 。将它们命名为你想要的任何东西。

由于每个容器（对我而言）的高度与每页的顶栏相同，我做了以下操作:(您必须安装设备插件和cordova的键盘插件

在我的js开头有 window.innerHeight （如果你在native.keyboardshow函数内执行此操作，iOS将根据键盘为您提供调整大小的视图＆＃39; s高度）

然后，在我的native.keyboardShow函数中，我执行了以下操作： - 然后得到了顶栏的高度（我选择了一个，因为它们都是一样的） - 添加了keyboard height和top bar height一起添加的内容 - 然后我从窗口高度减去那些

这样做现在给了我高度＆＃34;剩下的＆＃34;用于滚动视图。在那之后我：

按类名inputScrollContainer
通过它们循环并为每个分配新的高度（您可以将其分配给当前视图中唯一的滚动视图，但我只有三个受影响的视图，因此我并不担心它）

现在滚动视图已调整为顶部栏和键盘之间的任何内容。然后在我的native.keyboardhide函数上，我刚刚将高度恢复到之前所有滚动视图的原始高度。

我确定还有其他方法可以做到这一点，但这样做可以让我在iOS和Android上获得灵活性和一致性。我希望这有助于某人！

Answer 2

要在键盘可见/显示时向上移动布局，请添加以下活动。

<activity android:windowSoftInputMode="adjustPan|adjustResize"> </activity>

adjustResize ：活动的主窗口始终调整大小，为屏幕上的软键盘腾出空间。

adjustPan ：活动的主窗口未调整大小以便为软键盘腾出空间。相反，窗口的内容会自动平移，以便键盘不会遮挡当前焦点，用户可以随时看到他们正在键入的内容。这通常比调整大小更不合适，因为用户可能需要关闭软键盘以获得窗口的模糊部分并与其交互。在您的方案中，您可以使用调整平底锅 但它的工作原理基于Android版本。它可能无法在特定版本中使用。请找到并使用。

Please have look at this answer you will come to know a lot.

Answer 3

视口高度是这里的问题。有一些方法可以用mediaqueries或javascript（用正确的高度修改所有dom元素）来解决问题。但在我的情况下，我有很多dom元素，并且真的不想用javascript改变所有这些。我的诀窍是： - 用rem改变你所有的vh并将你的值除以4 - 在你的所有页面中使用这个小javascript：

$("html").css({"font-size": ($(window).height()/25)+"px"});

在这个例子中，font-size是窗口高度的4％（因为font-size在移动应用程序上具有最小值），所以： 1rem =寡妇高度的4％= 4vh 0.25rem = 1vh等...

在我的情况下，我使用SASS函数除以4的所有vh，因此更改所有css更容易。（1h = rem（1）= 0.25rem）

希望有一天这会有所帮助。

Answer 4

此JS选项提供类似于iOS的UX：

let events = {
    android: {
        keyboard: {
            threshold: 300, //px
            transition: 300, //ms
            visible: false,
            last_el: null
        }
    }
}


onAndroidKeyboard() {
    if(is_android) {
        let threshold = events.android.keyboard.threshold;
        let transition = events.android.keyboard.transition;

        function onIn(e) {
            let target = e.target;

            if(target.nodeName.toLowerCase() !== 'input') {
                 return false
            }

            let visible = events.android.keyboard.visible;

            let h = window.innerHeight;

            try {
                let bottom = target.getBoundingClientRect().bottom;

                if(bottom) {
                    let diff = h - bottom;

                    if(diff < threshold) {
                        if(!visible) {
                            let animate_amount = threshold - diff;
                            events.android.keyboard.visible = true;
                            document.body.style.transform = 'translateY(0)';
                            document.body.style.webkitTransition = `all ${transition}ms`;
                            document.body.style.transition = `all ${transition}ms`;
                            events.android.keyboard.visible = true;
                            events.android.keyboard.last_el = target;
                            requestAnimationFrame(function () {
                                document.body.style.transform = `translateY(-${animate_amount}px)`;
                            });
                        }
                    }
                }
            } catch (e) {
                console.error(e);
            }
        }

        function onOut(e) {
            let visible = events.android.keyboard.visible;

            if(visible) {
                document.body.style.transform = 'translateY(0)';

                setTimeout(function () {
                    requestAnimationFrame(function () {
                        document.body.style.removeProperty('transform');
                        document.body.style.removeProperty('transition');
                        document.body.style.removeProperty('webkitTransition');

                        events.android.keyboard.visible = false;
                        events.android.keyboard.last_el = null;
                    });
                }, transition)
            }
        }

        document.addEventListener('focusin', onIn, false);
        document.addEventListener('focusout', onOut, false);
    }
}

Cordova安卓键盘推送内容

4 个答案: