javascript - Ionic 3 键盘盖（覆盖） 聚焦离子输入元件

Question

目前我正在使用 ionic 版本：3.19.1，在 android 设备和模拟器上测试了该应用程序。问题是离子输入聚焦和键盘出现并覆盖带有标签 > 数量 < 的离子输入元素。

<ion-grid>
  <ion-row>
    <ng-container>
      <ion-col>
        <div>
            <ion-item>
              <ion-label stacked>{{ question.label | translate }}</ion-label>
              <ion-input   [focus]="question.focus" "></ion-input>
            </ion-item>

             </div>
          </ion-col>
    </ng-container>
  </ion-row>
</ion-grid>

我正在通过焦点指令以编程方式将焦点设置在元素上。

我尝试了以下事情：设置位置：在 ion-col 元素上初始，还尝试了 scrollAssist：true，autoFocusAssist：true。是否重新安装了 cordova ionic-plugin-keyboard 和 @ionic-native/keyboard

包.json：

    "dependencies": {
    "@angular/common": "5.0.3",
    "@angular/compiler": "5.0.3",
    "@angular/compiler-cli": "5.0.3",
    "@angular/core": "5.0.3",
    "@angular/forms": "5.0.3",
    "@angular/http": "5.0.3",
    "@angular/platform-browser": "5.0.3",
    "@angular/platform-browser-dynamic": "5.0.3",
    "@ionic-native/core": "4.4.0",
    "@ionic-native/http": "^4.7.0",
    "@ionic-native/in-app-browser": "^4.7.0",
    "@ionic-native/keyboard": "^4.7.0",
    "@ionic-native/ms-adal": "^4.6.0",
    "@ionic-native/native-storage": "^4.7.0",
    "@ionic-native/network": "^4.6.0",
    "@ionic-native/splash-screen": "4.4.0",
    "@ionic-native/sqlite": "^4.6.0",
    "@ionic-native/status-bar": "4.4.0",
    "@ionic/storage": "2.1.3",
    "@ngx-translate/core": "^9.1.1",
    "@ngx-translate/http-loader": "^2.0.1",
    "@types/adal-angular": "^1.0.0",
    "@types/chance": "^1.0.0",
    "@types/odata": "^0.3.3",
    "adal-angular": "^1.0.17",
    "chance": "^1.0.16",
    "cordova-android": "~7.0.0",
    "cordova-browser": "5.0.3",
    "cordova-plugin-advanced-http": "^1.11.1",
    "cordova-plugin-compat": "^1.2.0",
    "cordova-plugin-device": "^2.0.1",
    "cordova-plugin-file": "^6.0.1",
    "cordova-plugin-inappbrowser": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.0.5",
    "cordova-plugin-ionic-webview": "^1.1.19",
    "cordova-plugin-ms-adal": "^0.10.1",
    "cordova-plugin-nativestorage": "^2.3.1",
    "cordova-plugin-network-information": "^2.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^2.3.0",
    "ionic-angular": "3.9.2",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "ng2-webstorage": "^2.0.0",
    "odata": "^0.3.8",
    "rxjs": "5.5.2",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.18"
  },
  "devDependencies": {
    "@angular/cli": "^1.7.3",
    "@ionic/app-scripts": "3.1.8",
    "change-case": "^3.0.2",
    "json2ts": "0.0.7",
    "typescript": "2.4.2",
    "xml-query": "^1.4.0",
    "xml-reader": "^2.4.3",
    "xml2js": "^0.4.19"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-sqlite-storage": {},
      "cordova-plugin-ms-adal": {},
      "cordova-plugin-inappbrowser": {},
      "cordova-plugin-advanced-http": {},
      "cordova-plugin-nativestorage": {},
      "cordova-plugin-network-information": {}
    },
    "platforms": [
      "browser",
      "android"
    ]
  },
  "config": {
    "ionic_webpack": "./src/config/webpack.config.js"
  }
}

带有活动键盘的示例

包含输入文件的示例

标签： javascriptangularionic-frameworkionic3

Answer 1

我写了一个指令来解决这个问题，在我的项目中运行良好；

import {Platform} from '@ionic/angular';

@Directive({
  selector: '[appInputScroll]',
})
export class InputScrollDirective {
  private elementRef: ElementRef;

  @HostListener('ionFocus', ['$event.target']) onFocus(evt) {
    if (evt && this.elementRef) {
      setTimeout(() => {
        this.elementRef.nativeElement.scrollIntoView({behavior: 'smooth', block: 'center'});
      }, 300); // 300 is keyboard open time
    }
  }

  constructor(elementRef: ElementRef, private platform: Platform) {
    if (this.platform.is('android')) {
      this.elementRef = elementRef;
    }
  }

}

并在这样的元素中使用

 <ion-input appInputScroll [(ngModel)]="user.name"></ion-input>