Cordova 插件离子键盘使布局崩溃

Posted 2023-03-15

【中文标题】Cordova 插件离子键盘使布局崩溃

【英文标题】：Cordova plugin ionic keyboard crashes the layout

【发布时间】：2018-03-23 09:01:53

【问题描述】：

我在我的Ionic3/Angular 应用程序中使用cordova-plugin-ionic-keyboard 键盘插件。在键盘出现之前，我的 UI 如下所示：

但是，当键盘出现时，应用程序的布局会崩溃，如下所示：

然后，我尝试使用以下代码在 config.xml 中停止调整布局大小：

<preference name="KeyboardResize" value="false" />

但是，用户界面仍然中断。然后尝试了 KeyboardResizeMode 的所有三种组合，但 UI 仍然中断。

<preference name="KeyboardResizeMode" value="body" />
<preference name="KeyboardResizeMode" value="ionic" />
<preference name="KeyboardResizeMode" value="native" />

我的 html 代码：

<ion-content>
  <ion-grid class="login-grid">
    <ion-row>
      <ion-col>
        <ion-label class="sign-in-label text-center">SIGN IN</ion-label>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <ion-item class="wrapper border-radius-23">
          <ion-label class="email-label">
            <ion-icon name="person" class="text-red"></ion-icon>
          </ion-label>
          <ion-input clearInput type="text" placeholder="Email" class="user-email-input"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <ion-item class="wrapper border-radius-23">
          <ion-label class="email-label">
            <ion-icon name="lock" class="text-red"></ion-icon>
          </ion-label>
          <ion-input clearInput type="text" placeholder="Password" class="user-email-input"></ion-input>
        </ion-item>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col class="padding-left-30 padding-right-30">
        <button ion-button class="sign-in-btn">SIGN IN</button>
      </ion-col>
    </ion-row>
    <div class="text-center">
      <a class="forgot-password">Forgot Password?</a>
    </div>
    <ion-row class="padding-top-5">
      <ion-label class="or-sign-in-label text-center">OR SIGN IN WITH</ion-label>
    </ion-row>
    <ion-row class="padding-left-30 padding-right-30">
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 facebook-btn">
          <ion-icon name="logo-facebook" class="padding-right-5 padding-left-5"></ion-icon>
          facebook
        </button>
      </ion-col>
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 twitter-btn">
          <ion-icon name="logo-twitter" class="padding-right-5 padding-left-5"></ion-icon>
          twitter
        </button>
      </ion-col>
      <ion-col col-4>
        <button ion-button class="padding-0 text-none width-100 border-radius-23 google-btn">
          <ion-icon name="logo-google" class="padding-right-5 padding-left-5"></ion-icon>
          google
        </button>
      </ion-col>
    </ion-row>
    <ion-row class="text-center">
      <ion-col>
        <ion-label class="no-account">Don't have an account yet?<span class="sign-up-a padding-left-5">SIGN UP</span></ion-label>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

谁能指出当键盘出现在屏幕上时如何避免 UI 中断？

【问题讨论】：

能否请您发布您的 HTML 代码，以便我们了解您在这里使用了哪些离子组件？

添加了HTML代码@CodeChanger

【参考方案1】：

AndroidManifest.xml 文件中的更改对我有用 :)。

  android:windowSoftInputMode="adjustPan"

【讨论】：

这使得键盘出现并且所有页面的高度都不会改变，所以如果在键盘填充的那个空间下面有输入，用户就无法到达它，因为没有滚动。跨度>

【参考方案2】：

根据您的代码，我认为您需要在显示键盘时禁用滚动。

第 1 步：在您的 app.module.ts 中，在根配置对象中将 scrollAssist 和 autoFocusAssist 设置为 false

更新导入数组

imports: [
    IonicModule.forRoot(MyApp
      /*
       * MODIFY BOOTSTRAP CODE BELOW
       * Adds a config object that disables scrollAssist and autoFocusAssist for ios only
       * https://github.com/driftyco/ionic/issues/5571
       */
      , 
        platforms : 
          ios : 
            // These options are available in ionic-angular@2.0.0-beta.2 and up.
            scrollAssist: false,    // Valid options appear to be [true, false]
            autoFocusAssist: false  // Valid options appear to be ['instant', 'delay', false]
          
          // http://ionicframework.com/docs/v2/api/config/Config/)
        
      
      /*
       * END MODIFY
       */
    )
  ],

第 2 步：在您的离子键盘插件的 app.component.ts disableScroll 中，如下例所示。

export class HomePage 
constructor(public navCtrl: NavController) 
    platform.ready().then(() => 
       this.keyboard.disableScroll(true);
    );

试试这个。

【讨论】：

我以前看过这个gist.github.com/EvanWillms/8773f8cfa12f469fabf0bdd7a75723e7 链接。它不起作用