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)import "ViewChild"
import {Component, ViewChild} from '@angular/core';
2)htmlテンプレートに入力への参照を作成します:
<ion-input #focusInput></ion-input>
3)@ViewChildを使用して、先ほど参照したばかりの入力コンポーネントにアクセスします。
@ViewChild('focusInput') myInput ;
4)フォーカスをトリガーする
IonViewLoaded()メソッドを使用して、ビュー/ページがロードされるたびにトリガーします。
setTimeoutが必要です
ionViewLoaded() {
setTimeout(() => {
Keyboard.show() // for Android
this.myInput.setFocus();
},150); //a least 150ms.
}
4)Androidでキーボードを表示
import { Keyboard } from 'ionic-native';
Keyboard.show()を呼び出して、Androidでキーボードを呼び出します。
5)iOSでキーボードを表示する
config.xmlに次の行を追加して、iOSで動作するようにします。
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
mhartingtonの素晴らしい記事の助けを借りて: http://mhartington.io/post/setting-input-focus/
「入力」を「角度/コア」からインポートする必要はありません。
単に:
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);
}
}
そして、Ciprian Mocanuへのコメントへの回答:
IOSでは機能しません:(
IOSで動作します-> iOS 10を搭載したiPhone 6 PLUSでチェック済み
おそらくこの動作が複数回必要になるため、このためのグローバルディレクティブを作成する必要があると思います。
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)
}
}
}
ion-input
フィールドにautofocus
属性を追加してください
<ion-input #myinput type="..." placeholder="..."
(keyup.enter)="someAction()"
autofocus ></ion-input>
上記のどれも私のために働いていませんでした。ここに私が解決した方法があります:
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)
}
}
}
次に、イオン入力フィールドにautofocus属性を追加します。
<ion-input #input type="text" placeholder="..."
[(ngModel)]="myBoundVariable"
(keyup.enter)="myEnterKeyAction()"
autofocus></ion-input>
ブラウザとAndroidではなくIOSでまだテスト済みですが、動作しない理由はありません。
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>
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>
この解決策は、キーボードがコンテンツを押しのけてしまうという問題も解決することがわかりました。
<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();
});
}
Initコンポーネントの入力にフォーカスを設定する必要がある場合、デフォルトでクラスinput-has-focusを次のようにion-itemに設定します。
<ion-item class="input-has-focus">
それで全部です!
IOSおよびAndroidの場合、私にとってはうまくいきます。 ionViewWillEnter()にフォーカスコードを配置します。
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
}
HTMLファイルの入力タグ
<ion-input type="text" #Input></ion-input>
そして、この行をconfig.xmlに追加して、iOSで動作するようにします。
<preference name="KeyboardDisplayRequiresUserAction" value="false" />
私の場合、何らかの理由で、ionViewLoaded()がトリガーされませんでした。 ionViewDidLoad()を試行し、タイマーを200に設定すると動作しました。
150は私には早すぎた。完全なソリューション:
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)
}
}
そして、入力タグで:
<ion-input type="text" #inputToFocus></ion-input>