首页 文章

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

提问于
浏览 次
2

目前我正在使用离子版：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-native /键盘

的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

javascript angular ionic-framework ionic3

1 回答

  • 0

    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();
        }
    }
    回复于

相关问题