更改手机中回车键的行为 - Angular 5 [英] Change behaviour of enter key in a phone - Angular 5
问题描述
我正在使用 input
s 但我不太确定导航的配置是如何完成的(我猜这是预定义的行为).
I am working with input
s but I am not really sure about how is the configuration of the navigation done (I guess that it are predefined behaviours).
我不在最后一个input
回车键进入下一个.这个正在按我的意愿工作.
I am not in the last input
the enter key goes to the next one. This one is working as I want.
然而,当我在最后一个 input
上时,当我按下 Enter 键时,它会自动点击下一个 button
.
Nevertheless, when I am on the last input
, when I press enter, it automatically clicks on the next button
.
这是我试图避免的.有什么办法可以改变这种行为吗?只是关闭键盘或单击另一个按钮
?
This is what I am trying to avoid. Is there any way to change this behaviour? Just to close the keyboard or to click on another button
?
我已经尝试过 keyup.enter
并且它伪有效.它会调用该方法,但还会单击下一个 button
I have tried with keyup.enter
and it pseudo works. It calls to the method but also clicks on the next button
HTML
<input
type="text"
class="form-control"
id="validationCustomSurname"
placeholder="e.g. Lopez"
required
(keyup.enter)="onNavigate(1, 'forward')"
[(ngModel)]="values.store.surname"
name="surname"
/>
这种方法应该适用于手机,所以我猜 keydown
不是一个选项,因为 $event.code
没有在手机中给我任何代码.
This method should work on a phone, so I guess that keydown
is not an option since $event.code
does not give me any code in the phone.
推荐答案
前段时间我做了一个指令 查看stackblitz 你在div(或表单)中应用的方式
Some time ago I make a directive see stackblitz that you apply in a div (or in a form) in the way
<form [formGroup]="myForm" (submit)="submit(myForm)" enter-tab>
Each input or button add a reference variable #nextTab like
<input name="input1" formControlName="input1" #nextTab/>
<button type="button" #nextTab/>
</form>
该指令使用 ContentChildren 向所有具有 #nextTab 的组件添加一个 keydown.enter 以聚焦到下一个控件
The directive use ContentChildren to add a keydown.enter to all the components that have #nextTab to focus to the next control
export class EnterTabDirective {
@ContentChildren("nextTab") controls: QueryList<any>
nextTab
constructor(private renderer: Renderer2, private el: ElementRef) {
}
ngAfterViewInit(): void {
this.controls.changes.subscribe(controls => {
this.createKeydownEnter(controls);
})
if (this.controls.length) {
this.createKeydownEnter(this.controls);
}
}
private createKeydownEnter(querycontrols) {
querycontrols.forEach(c => {
this.renderer.listen(c.nativeElement, 'keydown.enter', (event) => {
if (this.controls.last != c) {
let controls = querycontrols.toArray();
let index = controls.findIndex(d => d == c);
if (index >= 0) {
let nextControl = controls.find((n, i) => n && !n.nativeElement.attributes.disabled && i > index)
if (nextControl) {
nextControl.nativeElement.focus();
event.preventDefault();
}
}
}
})
})
}
这篇关于更改手机中回车键的行为 - Angular 5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!