Question

目前我正在使用离子版本：3.19.1，在Android设备和模拟器上测试了应用程序。问题是当离子输入聚焦时＆amp;键盘出现并覆盖带有标签的离子输入元件＆gt;数量＆lt;关注它。

<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-native / keyboard

的package.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"
  }
}

example with active keyboard

example with input filed that was covered

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>

Answer 2

x.Html文件

<ion-grid>
  <ion-row>
    <ng-container>
      <ion-col>
        <div>
            <ion-item> 
              <ion-label stacked>{{ question.label | translate }}</ion-label>
              <ion-input  #Input></ion-input>
            </ion-item>

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

x.ts文件

    import {Component} from '@angular/core';
    import {IonicPage, NavController, NavParams} from 'ionic-angular';
    import { Keyboard } from 'ionic-native';

    @IonicPage()
    @Component({
      selector: 'x',
      templateUrl: 'x.html',
    })
    export class XPage {

      @ViewChild('Input') xInput: TextInput;
      constructor(public navCtrl: NavController,
                  public navParams: NavParams) {}
        focusFun() {
            this.xInput.setFocus();
            Keyboard.show();
        }
    }

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

2 个答案:

x.Html文件

x.ts文件