Не удалось установить фокус на мой <ионный вход>, когда я вхожу на страницу

Я хочу, чтобы фокус был установлен на моем <ion-input> при входе на страницу

Всякий раз, когда я вхожу на эту страницу своего приложения, я бы хотел, чтобы клавиатура была открыта и фокус был установлен на ion-input

Ответы

Ответ 1

использовать ngAfterViewChecked:

Смотрите plnkr здесь

import { Component, Input, ViewChild,ElementRef,Renderer, AfterViewChecked,ChangeDetectorRef  } from '@angular/core';
import { NavController, PopoverController, NavParams, ViewController, ModalController } from 'ionic-angular';

@Component({
  selector: 'page-comments',
  templateUrl: 'comments.html'
})

export class CommentsParentPage implements AfterViewChecked {
@ViewChild('input') myInput;

needsFocus: boolean;

constructor(public navCtrl: NavController,private renderer: Renderer, 
            private elementRef: ElementRef, public modalCtrl: ModalController, 
            private _changeDetectionRef: ChangeDetectorRef) {
}

ionViewDidEnter() {

   this.needsFocus = true;
}

public ngAfterViewChecked(): void {
    if (this.needsFocus) {
        this.needsFocus = false;
        this.myInput.setFocus();
        this._changeDetectionRef.detectChanges();
    }
}

Ответ 2

Вы можете сделать это, используя Directive, как показано ниже. Код надежды не требует пояснений. Если у вас есть какие-либо проблемы, прокомментируйте ниже.

Играйте с Git Код репорта.

Вы можете просмотреть это на Ionic View: Id = F5F367AE

Примечание. Просто коснитесь My Page.

Set-focuser.ts

import { Directive, Renderer, ElementRef } from '@angular/core';
import { Keyboard } from '@ionic-native/keyboard';

@Directive({
  selector: '[set-focuser]' // Attribute selector
})
export class SetFocuser {

  constructor(private renderer: Renderer, private elementRef: ElementRef, public keyboard: Keyboard) {
  }

  ngAfterViewInit() {
    const element = this.elementRef.nativeElement.querySelector('input');
    // to delay 
    setTimeout(() => {
      this.renderer.invokeElementMethod(element, 'focus', []);
      this.keyboard.show();
    }, 500);
  }

}

.html

 <ion-input set-focuser type="text"></ion-input>

app.module.ts

import { SetFocuser } from "../components/set-focuser/set-focuser";

@NgModule({
  declarations: [
     SetFocuser,
  ],

Проблемы с вашим пакетом. json

Вам нужно удалить модуль "ionic-native": "2.2.11",.
Используйте "@ionic/app-scripts": "1.1.4", вместо "@ionic/app-scripts": "1.0.0",
После выполнения указанных выше изменений выполните npm i

Это официальный файл package.json.

Ответ 3

Вы можете попробовать простой метод.

 <div ng-init="getfocus()">
   <ion-input id="myAnchor" type="text" placeholder="Write Your Comments"/>
</div>

В js файле вызывается функция с ng-init

function getfocus() {
   document.getElementById("myAnchor").focus();
}

Надеюсь, что этот код поможет вам. Если вы получите какую-либо ошибку, прокомментируйте.