输入在手机上被键盘重叠

Posted 2023-03-08

【中文标题】输入在手机上被键盘重叠

【英文标题】：Input overlapped by keyboard on mobile

【发布时间】：2017-09-10 21:50:40

【问题描述】：

我正在开发一个带有 angular-meteor 的应用程序，每次我关注屏幕底部的输入时，键盘都会与它重叠。

我尝试将其添加到我的 mobile-config.js 但不起作用：

App.setPreference('fullscreen', false);
App.setPreference('android-windowSoftInputMode', 'adjustResize');

还有我 index.html 上的这个元数据：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi, width=device-width" />

我是不是忘记了什么？

【问题讨论】：

你找到解决方案了吗？我有相同的设置，并且渴望让它工作！

找不到任何东西，sz

我已经为它做了一个有效的解决方法，如果你有兴趣，让我知道在这里发布它

一定要告诉我

在下面找到我的答案

【参考方案1】：

因此，您有两个适用于 Android 的选项（ios 会更好地处理它）。在您的AndroidManifest.xml 文件中，您将在第一个<activity> 标记内看到android:windowSoftInputMode。这将调整键盘与屏幕的交互方式。 Here 是有关其工作原理的更多信息。

【讨论】：

所以我知道应该是 adjustPan 而不是 adjustResize （不知道为什么人们会推荐这个）。无论如何，我都尝试过，但也不起作用。在 Meteor 上，我有我的应用程序根 mobile-config.js。这是我应该改变的。在 .meteor/local/cordova-build 我找到了 config.xml （由第一个带有参数的生成）。最后一个生成了platforms/android/AndroidManifest.xml中的那个，但是我在最后一个上找不到对第一个添加的这个参数的任何引用

我也尝试将此属性直接添加到 AndroidManifest.xml 中（我知道我不应该编辑这个，只是尝试一下）但应用程序无法编译

@DanielRodriguez 我对 Meteor 不太熟悉 - 是的，您应该将此属性直接添加到 AndroidManifest.xml 文件中，尽管我不知道 Meteor 是如何处理的

在一个普通的 Cordova 应用程序上，您必须编辑 config.xml，这个会生成 AndroidManifest.xml。在 Meteor 上，您不必编辑这两个中的任何一个，只需编辑 mobile-config.js，这个生成 config.xml（这个生成另一个）。所以编辑这三个文件中的任何一个我都可以得到任何修复

这是我想要的修复，但这是使用 React：medium.freecodecamp.com/…

【参考方案2】：

这几乎适用于所有情况。

这段代码在路径下：

── client
   ├── main.js

// Global variables 
let keyboardHeight = 0, originalHeight = 0;

Meteor.startup(() => 
    if(Meteor.isCordova)
        StatusBar.hide();

        // ionic plugin defaults to hide it
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(false);

        // Android specific events
        isAndroid = cordova.platformId == 'android';
        if(isAndroid)
            // Handle android backbutton
            document.addEventListener("backbutton", onBackButtonDown, false);

            // Using ionic-plugin-keyboard
            window.addEventListener("native.keyboardshow", onShowKeyboard, false);
            window.addEventListener("native.keyboardhide", onHideKeyboard, false);
        
    
;
onShowKeyboard = function(e)
    let elem = document.activeElement,      // Get the focused element
        $parent = $(elem).scrollParent();   // Get closest scrollable ancestor (jQuery UI)

    // If there is no scrollable parent, no need to continue processing
    if($parent.length == 0)
        return;
    

    // Check if the keyborad type has changed (i.e. from text to number)
    if(keyboardHeight != e.keyboardHeight)
        keyboardHeight = e.keyboardHeight;
    

    // Don't resize if the original height hasn't been reset by onHideKeyboard()
    if(originalHeight == 0)
        originalHeight = $parent.height();
    

    // Subtract keyboard height from parent height + accessory bar height
    // Add some class to the parent, to be able to get it back to normal state onHideKeyboard()
    $parent.height(originalHeight - keyboardHeight + 50).addClass('adjusted');

    // Give the keyboard time to show
    setTimeout(function()      
        // Scroll to active element
        document.activeElement.scrollIntoView(
            behavior: "smooth", // or "auto" or "instant"
            block: "center"     // or "start" or "end"
        );
    , 100);

    // Unbind DOM object from HTML for garbage collection
    elem = null;
    $parent.prevObject = null; // To avoid memory leak (for any jQuery DOM object)
    $parent = null;
;
onHideKeyboard = function(e)
    let s = $('.adjusted').attr('style');
    s = s.replace(/height.*;/, '');
    $('.adjusted').attr('style', s).removeClass('adjusted');
    keyboardHeight = 0;
    originalHeight = 0;
;