Ionic 4 键盘覆盖输入字段答案

【问题标题】：Ionic 4 keyboard covers input fieldIonic 4 键盘覆盖输入字段
【发布时间】：2022-04-07 15:28:04
【问题描述】：

我有一个 Ionic 4 应用程序，其中有一个带有输入的表单。
当用户单击输入时，它会打开键盘，但会隐藏内容，不滚动。
有没有办法解决这个问题？

这是我的代码：

<form #f="ngForm" (ngSubmit)="sendMail()">
   <ion-item>
     <ion-label position="floating">name
     </ion-label>
     <ion-input [(ngModel)]="senderName">
     </ion-input>
   </ion-item>

   <ion-item>
      <ion-label position="floating">mail
      </ion-label>
      <ion-input [(ngModel)]="senderMail">
      </ion-input>
    </ion-item>

    <ion-item class="borderedTextArea">
      <ion-textarea [(ngModel)]="mailText" style="height:150px;"></ion-textarea>
    </ion-item>

    <ion-button type="submit" style="float:left">send</ion-button>

</form>

【问题讨论】：

标签： cordova ionic-framework ionic4

【解决方案1】：

我目前正在将 Ionic4 与 Cordova 9 和所有最新软件包一起使用，但我在框架中找不到任何适合我的设置。最后我做了这个完全绕过框架的解决方法。它有一点动画，看起来还不错，所以我一直在使用它，直到框架正确解决了这个问题。

global.scss

ion-app {
    /*animation of native keyboard show*/
    transition: margin 300ms;
}

app.component.ts

declare var $: any;

ngAfterViewInit() {
    // This element never changes.
    let ionapp = document.getElementsByTagName("ion-app")[0];

    window.addEventListener('keyboardDidShow', async (event) => {
        // Move ion-app up, to give room for keyboard
        let kbHeight: number = event["keyboardHeight"];
        let viewportHeight: number = $(window).height();
        let inputFieldOffsetFromBottomViewPort: number = viewportHeight - $(':focus')[0].getBoundingClientRect().bottom;
        let inputScrollPixels = kbHeight - inputFieldOffsetFromBottomViewPort;

        // Set margin to give space for native keyboard.
        ionapp.style["margin-bottom"] = kbHeight.toString() + "px";

        // But this diminishes ion-content and may hide the input field...
        if (inputScrollPixels > 0) {
            // ...so, get the ionScroll element from ion-content and scroll correspondingly
            // The current ion-content element is always the last. If there are tabs or other hidden ion-content elements, they will go above.
            let ionScroll = await $("ion-content").last()[0].getScrollElement();
            setTimeout(() => {
                $(ionScroll).animate({
                    scrollTop: ionScroll.scrollTop + inputScrollPixels
                }, 300);
            }, 300); // Matches scroll animation from css.
        }
    });
    window.addEventListener('keyboardDidHide', () => {
        // Move ion-app down again
        // Scroll not necessary.
        ionapp.style["margin-bottom"] = "0px";
    });
}

【讨论】：

我们可以在 animate() 函数中使用 vanilla javascript 代替 jQuery 吗？
是的，例如这里有关于这个主题的答案：stackoverflow.com/questions/15521081/…

【解决方案2】：

我已经暂时解决了这个 Ionic 错误：

...
<ion-texarea (ionFocus)="fixTextareaBug()">
...

在您的 .ts 中

@ViewChild(IonTextarea)
public ionTextArea: IonTextarea;
private focusFix = false;

...
...

public fixTextareaBug() {
  setTimeout(() => {
    if (this.focusFix) {
      this.focusFix = false;
      return;
    }
    (this.ionTextArea as any).el.lastElementChild.blur();
    this.focusFix = true;
    (this.ionTextArea as any).el.lastElementChild.focus();
  }, TEXTAREA_TIMEOUT);
}

希望能解决你的问题

【讨论】：

【解决方案3】：

我通过降级键盘插件来解决这个问题

ionic cordova plugin remove cordova-plugin-ionic-keyboard

ionic cordova plugin add cordova-plugin-ionic-keyboard@2.0.5

然后去掉android平台再添加

【讨论】：

【解决方案4】：

我也遇到过这个问题，但仅在 android 中，我所做的是创建一个脚本来获取焦点元素和键盘的高度，并使用 jQuery 我添加了一个 marginTop 以在键盘上方移动主体键盘显示，这是我的代码：

constructor(
    private platform: Platform,
    private keyboard: Keyboard
  ) {
    if(this.platform.is('android')){
      this.keyboard.onKeyboardShow().subscribe((e) => {
        const offset = $(document.activeElement).offset().top;
        let height = (offset - e.keyboardHeight)*-1;
        height = height > 0 ? 0 : height;      
        $('body').animate({ 'marginTop': height + 'px' }, 100);
      });
      this.keyboard.onKeyboardHide().subscribe(e => {
        $('body').animate({ 'marginTop': 0 + 'px' }, 100);
      });
    }
}

需要的库：

    npm install jquery
    npm install @types/jquery
    ionic cordova plugin add cordova-plugin-ionic-keyboard
    npm install @ionic-native/keyboard

进口

    import { Platform } from '@ionic/angular';
    import * as $ from "jquery";
    import { Keyboard } from '@ionic-native/keyboard/ngx';

不是一个优雅的解决方案，但它有效

只需在此代码中进行一些更改即可提供更好的体验

this.keyboard.onKeyboardShow().subscribe((e) => {
    const safeArea = 40 ;
    const offset1 = $(document.activeElement).offset().top;
    const offset2 = window.innerHeight - e.keyboardHeight - $(document.activeElement).height() - safeArea ;
    const diff = offset1 - offset2;
    if(offset1 > window.innerHeight -  e.keyboardHeight - safeArea)
        $('body').animate({ 'marginTop': -1 * diff + 'px' }, 100);
});

【讨论】：

【解决方案5】：

只需使用 ionFocus 事件和 scrollToBottom 函数解决它，然后在 ionFocus 中调用它，这样当您专注于输入时，您的内容将滚动到底部强文本

【讨论】：

html。 ts。 @ViewChild(IonContent, {read: IonContent, static: false}) myContent: IonContent; ScrollToBottom() { setTimeout(() => { this.myContent.scrollToBottom(300); }, 1000); } showOptionsToggle(boo) { console.log('True or false:-', boo); this.ScrollToBottom(); }
欢迎来到 StackOverflow。请edit您的问题添加更多信息。不要使用 cmets 发布大段代码。

【解决方案6】：

你可以尝试一些组合

ionFocus

https://ionicframework.com/docs/api/input#events 和

scrollIntoView

https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView 如果没有其他工作

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review

【解决方案7】：

<preference name="resizeOnFullScreen" value="true" />

您可以安装 cordova-plugin-ionic-keyboard 并编辑您的 config.xml 文件并添加这行代码

cordova-plugin-ionic-keyboard

有一个 Android 错误会阻止键盘在应用全屏时调整 WebView 的大小（即，如果使用 StatusBar 插件隐藏 StatusBar）。此设置（如果设置为 true）添加一种解决方法，即使应用程序处于全屏状态，也可以调整 WebView 的大小。

【讨论】：