it-swarm.com.de

Setzen Sie mit Ionic 2 den Fokus auf einen Eingang

Gelöst:

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


@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('input') myInput ;

  constructor() {}

  ionViewDidLoad() {

    setTimeout(() => {
      Keyboard.show() // for Android
      this.myInput.setFocus();
    },150);

 }

} 

1) importiere "ViewChild"

import {Component, ViewChild} from '@angular/core';

2) Erstellen Sie einen Verweis auf Ihre Eingabe in Ihrer HTML-Vorlage:

<ion-input #focusInput></ion-input>

3) Verwenden Sie @ViewChild, um Zugriff auf die Eingabekomponente zu erhalten, auf die Sie zuvor verwiesen haben.

@ViewChild('focusInput') myInput ;

4) Den Fokus auslösen

Verwenden Sie die ionViewLoaded () -Methode, um sie jedes Mal auszulösen, wenn die Ansicht/Seite geladen wird.

setTimeout wird benötigt

  ionViewLoaded() {

    setTimeout(() => {
      Keyboard.show() // for Android
      this.myInput.setFocus();
    },150); //a least 150ms.

 }

4) Zeige die Tastatur auf Android

import { Keyboard } from 'ionic-native';

Rufen Sie Keyboard.show () auf, um die Tastatur unter Android aufzurufen.

5) Tastatur unter iOS anzeigen

fügen Sie diese Zeile zu Ihrer config.xml hinzu, damit sie unter iOS funktioniert:

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

Mit Hilfe des großartigen Artikels von mhartington: http://mhartington.io/post/setting-input-focus/

42
Thomas

Sie müssen die 'Eingabe' nicht aus 'Winkel/Kern' importieren.

Einfach:

import {Component,ViewChild} from '@angular/core';
import {NavController, TextInput } from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('input') myInput: TextInput;

  constructor(private navCtrl: NavController) { }

  ionViewDidLoad() {

    setTimeout(() => {
      this.myInput.setFocus();
    },150);

 }

} 

Und Antwort auf Ciprian Mocanu:

Es funktioniert nicht in iOS :(

Es funktioniert unter iOS -> auf iPhone 6 PLUS mit iOS 10 geprüft

11
Mateusz Mateja

Ich denke, Sie sollten dafür eine globale Richtlinie erlassen, da Sie dieses Verhalten wahrscheinlich mehr als einmal wünschen.

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

@Directive({
    selector: '[autofocus]'
})
export class FocusInput implements OnInit {
    @ViewChild('myinput') input
    private focused: boolean
    ngOnInit(){
      this.focused = true
    }
    ionViewDidLoad() {
      if (this.focused) {
        setTimeout(()=>{
          this.input.setFocus()
          this.focused = false
          Keyboard.show()
        }, 300)
      }
    }
}

Fügen Sie nun in Ihrem ion-input-Feld das autofocus-Attribut hinzu

<ion-input #myinput type="..." placeholder="..."
            (keyup.enter)="someAction()"
            autofocus ></ion-input>
7
davejoem

Nichts davon arbeitete für mich. So habe ich gelöst:

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

@Directive({
    selector: '[autofocus]'
})
export class FocusInput implements AfterViewChecked {
    private firstTime: boolean = true;
    constructor(public elem: ElementRef) {
}

ngAfterViewChecked() {
  if (this.firstTime) {
    let vm = this;
    setTimeout(function(){

    vm.elem.nativeElement.firstChild.focus();
    vm.firstTime = false;
    Keyboard.show();

    }, 300)
  }
 }
}

Fügen Sie dann in Ihrem Ioneneingabefeld das Autofokusattribut hinzu:

 <ion-input #input type="text" placeholder="..."
            [(ngModel)]="myBoundVariable"
            (keyup.enter)="myEnterKeyAction()"
            autofocus></ion-input>

Getestet auf Browser und Android noch nicht IOS, aber kein Grund, warum es nicht funktionieren sollte.

6
Eric G

import {Component, ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('Comment') myInput ;

  constructor(private navCtrl: NavController) { }

  ionViewLoaded() {

    setTimeout(() => {
      this.myInput.setFocus();
    },150);

 }

}

Create a reference to your input in your template :

<ion-input #Comment>

5
KANOMDOOK
import {Component,ViewChild} from '@angular/core';
import {NavController} from 'ionic-angular';

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  @ViewChild('myInput') myInput ;

  constructor(private navCtrl: NavController) { }

  ionViewDidLoad() {

    window.setTimeout(() => {
      this.myInput.setFocus();
    }, 600); //SET A LONG TIME IF YOUR ARE IN A MODAL/ALERT

  }

}
<ion-input #myInput ></ion-input>

Ich habe diese Lösung gefunden, um auch das Problem zu beheben, dass die Tastatur den Inhalt wegschiebt.

<ion-list>
<ion-item>
  <ion-label>Name</ion-label>
  <ion-input #inputRef type="text"></ion-input>
</ion-item>
<button ion-button (click)="focusMyInput(inputRef)">Focus</button>

  @ViewChild(Content) content: Content;

  focusMyInput(inputRef) {
    const itemTop = inputRef._elementRef.nativeElement.getBoundingClientRect().top;
    const itemPositionY = this.content.scrollTop + itemTop -80;

    this.content.scrollTo(null, itemPositionY, 500, () => {
      inputRef.setFocus();
    });
  }
1
D.Roters

Wenn Sie bei einer Init-Komponente den Fokus auf einen Eingang setzen müssen, setzen Sie die Klasse input-has-focus standardmäßig auf ion-item:

<ion-item class="input-has-focus">

Das ist alles!

0
ThonyFD

Für IOS und Android funktioniert es gut für mich. füge den Fokuscode in ionViewWillEnter () ein. 

import { Component, ViewChild, ElementRef } from '@angular/core';
 import { Keyboard } from '@ionic-native/keyboard';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 @ViewChild("Input") inputEl: ElementRef;
 constructor(public keyboard:Keyboard){}

 ionViewWillEnter() { 
    setTimeout(() => {           
      this.inputEl.nativeElement.focus();
      this.keyboard.show();    
    }, 800); //If its your first page then larger time required 
}

Eingabe-Tag in der HTML-Datei 

 <ion-input type="text" #Input></ion-input>

Und fügen Sie diese Zeile zu Ihrer config.xml hinzu, damit sie unter iOS funktioniert:

<preference name="KeyboardDisplayRequiresUserAction" value="false" />
0
Jaydeep Kataria

In meinem Fall wurde ionViewLoaded () aus irgendeinem Grund nicht ausgelöst. Versuchte ionViewDidLoad () und stellte den Timer auf 200 und es funktionierte.

150 erwies sich als zu früh für mich. Komplette Lösung:

import { Component, ViewChild } from '@angular/core';//No need to import Input

export class HomePage {

  @ViewChild('inputToFocus') inputToFocus;
  constructor(public navCtrl: NavController) {}

  ionViewDidLoad()
  {
    setTimeout(() => {
      this.inputToFocus.setFocus();
    },200)
  }  
}

Und auf dem Eingabe-Tag:

<ion-input type="text" #inputToFocus></ion-input>
0
alchi baucha