输入键移动到 Ionic 4 Angular 8 形式的下一个元素
Enter key to move to next element in Ionic 4 Angular 8 form
在我用 Ionic 和 Angular 8 构建的 PWA 中,我需要处理回车键以移动到下一个元素。我怎样才能用(keyup.enter)实现它。请帮助我。
一种方法是设置下一个元素的引用。如下图
<ion-content padding>
<form (ngSubmit)="logForm()">
<ion-item>
<ion-label>Todo1</ion-label>
<ion-input type="text" [(ngModel)]="todo.title1" name="title1" #a (keyup.enter)="setFocus(b)"></ion-input>
</ion-item>
<ion-item>
<ion-label>Todo2</ion-label>
<ion-input type="text" [(ngModel)]="todo.title2" name="title2" #b (keyup.enter)="setFocus(c)"></ion-input>
</ion-item>
<ion-item>
<ion-label>Todo3</ion-label>
<ion-input type="text" [(ngModel)]="todo.title3" name="title3" #c (keyup.enter)="setFocus(d)"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea [(ngModel)]="todo.description" name="description" #d></ion-textarea>
</ion-item>
<button ion-button type="submit" block>Add Todo</button>
</form>
</ion-content>
并在 .ts
文件中
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
todo = {}
logForm() {
console.log(this.todo)
}
setFocus(nextElement) {
nextElement.setFocus(); //For Ionic 4
//nextElement.focus(); //older version
}
constructor(public navCtrl: NavController) {
}
}
我会为此编写自定义指令。受此启发answer。该指令可以放在 formtag 上,我们使用 HostListener
来监听 keyup.enter
,如果存在下一个元素,我们将焦点移到它。
我们需要对您提交表单的方式进行一些更改,因为每次您按回车键时都会调用 ngSubmit
。所以我会从表单标签中删除它,将按钮设置为 type="button"
并将点击事件附加到它以调用 logForm()
.
总而言之,这就是我所做的:
<form focusDir>
<!-- .... -->
<button ion-button type="button" block (click)="logForm()">Add Todo</button>
指令:
@Directive({
selector: "[focusDir]"
})
export class FocusDirective {
constructor() {}
@HostListener("keyup.enter") onKeyupEnter() {
var nextEl = this.findNextTabStop(document.activeElement);
nextEl.focus();
// or try for ionic 4:
// nextEl.setFocus();
}
findNextTabStop(el) {
var universe = document.querySelectorAll(
"input, button, select, textarea, a[href]"
);
var list = Array.prototype.filter.call(universe, function(item) {
return item.tabIndex >= "0";
});
var index = list.indexOf(el);
return list[index + 1] || list[0];
}
}
然后在你的 ngModule 的 declarations
数组中标记这个指令。
在我用 Ionic 和 Angular 8 构建的 PWA 中,我需要处理回车键以移动到下一个元素。我怎样才能用(keyup.enter)实现它。请帮助我。
一种方法是设置下一个元素的引用。如下图
<ion-content padding>
<form (ngSubmit)="logForm()">
<ion-item>
<ion-label>Todo1</ion-label>
<ion-input type="text" [(ngModel)]="todo.title1" name="title1" #a (keyup.enter)="setFocus(b)"></ion-input>
</ion-item>
<ion-item>
<ion-label>Todo2</ion-label>
<ion-input type="text" [(ngModel)]="todo.title2" name="title2" #b (keyup.enter)="setFocus(c)"></ion-input>
</ion-item>
<ion-item>
<ion-label>Todo3</ion-label>
<ion-input type="text" [(ngModel)]="todo.title3" name="title3" #c (keyup.enter)="setFocus(d)"></ion-input>
</ion-item>
<ion-item>
<ion-label>Description</ion-label>
<ion-textarea [(ngModel)]="todo.description" name="description" #d></ion-textarea>
</ion-item>
<button ion-button type="submit" block>Add Todo</button>
</form>
</ion-content>
并在 .ts
文件中
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
todo = {}
logForm() {
console.log(this.todo)
}
setFocus(nextElement) {
nextElement.setFocus(); //For Ionic 4
//nextElement.focus(); //older version
}
constructor(public navCtrl: NavController) {
}
}
我会为此编写自定义指令。受此启发answer。该指令可以放在 formtag 上,我们使用 HostListener
来监听 keyup.enter
,如果存在下一个元素,我们将焦点移到它。
我们需要对您提交表单的方式进行一些更改,因为每次您按回车键时都会调用 ngSubmit
。所以我会从表单标签中删除它,将按钮设置为 type="button"
并将点击事件附加到它以调用 logForm()
.
总而言之,这就是我所做的:
<form focusDir>
<!-- .... -->
<button ion-button type="button" block (click)="logForm()">Add Todo</button>
指令:
@Directive({
selector: "[focusDir]"
})
export class FocusDirective {
constructor() {}
@HostListener("keyup.enter") onKeyupEnter() {
var nextEl = this.findNextTabStop(document.activeElement);
nextEl.focus();
// or try for ionic 4:
// nextEl.setFocus();
}
findNextTabStop(el) {
var universe = document.querySelectorAll(
"input, button, select, textarea, a[href]"
);
var list = Array.prototype.filter.call(universe, function(item) {
return item.tabIndex >= "0";
});
var index = list.indexOf(el);
return list[index + 1] || list[0];
}
}
然后在你的 ngModule 的 declarations
数组中标记这个指令。