我有以下用例:
有input
,只要有焦点,输入旁边应显示一个弹出窗口。因此,当input
具有焦点时,用户可以键入input
或使用弹出窗口选择内容。
用户完成操作后,可以通过单击在其他位置或通过按Tab键并集中关注下一个元素。但是,如果他单击弹出窗口内的按钮,则该弹出窗口应保持不变打开,输入应保持焦点,以便用户可以继续打字。
我所遇到的问题是输入在弹出窗口中处理(click)
之前对其进行了角度处理(模糊)。这意味着当用户在弹出窗口中单击,输入失去焦点,它被隐藏,然后用户的点击将不再被处理。
我已将问题设为stackblitz-demo:
这是源代码:
app.component.html
<h1>Hello</h1>
<p>
Type 'one', 'two' or 'three' to change number or select a number
from popup.
<br>
<input type="checkbox" [(ngModel)]="hideHelperOnBlur" /> Hide
helper on blur (if this is set, then the buttons in the popup don't work
but if this is not set, the popup doesn't close if the input looses
focus -> how can I get both? The buttons to work but the popup still
closing on blur?)
</p>
Your number: {{selectedNumber}}
<p>
Change number:
<input [ngModel]="formattedNumber" (ngModelChange)="newNumberTyped($event)" (focus)="helperVisible = true"
(blur)="processBlur()" #mainInput />
<div *ngIf="helperVisible">
<button *ngFor="let number of numbers" (click)="selectNumber(number.raw)">{{number.formatted}} </button>
</div>
app.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
formattedNumber: string = 'three';
selectedNumber: number = 3;
helperVisible: boolean = false;
numbers: any[] = [
{ raw: 1, formatted: 'one' },
{ raw: 2, formatted: 'two' },
{ raw: 3, formatted: 'three' }
];
@ViewChild('mainInput', { static: false })
mainInput: ElementRef;
hideHelperOnBlur: boolean;
newNumberTyped(newFormattedNumber: string) {
this.numbers.forEach((number) => {
if (newFormattedNumber == number.formatted) {
this.formattedNumber = newFormattedNumber;
this.selectedNumber = number.raw;
}
});
}
selectNumber(newRawNumber: number) {
this.numbers.forEach((number) => {
if (newRawNumber == number.raw) {
this.formattedNumber = number.formatted;
this.selectedNumber = newRawNumber;
}
});
this.mainInput.nativeElement.focus();
}
processBlur() {
if (this.hideHelperOnBlur) {
this.helperVisible = false;
}
}
}
我期望以下行为:
我似乎只能获得第二,第三或第四有效的标准(请参见演示中的复选框)。
我已经尝试过的:
有人有解决方案吗?
您可以在此处使用mousedown
事件来发挥自己的优势。 mousedown
事件发生在blur
事件之前,click
事件发生在之后。只需在preventDefault
上调用mousedown
,即可防止input
失去焦点。这也将解决以下问题:单击弹出式窗口中的按钮时,input
闪烁,因此您可以在this.mainInput.nativeElement.focus();
功能中摆脱selectNumber
。
<button *ngFor="let number of numbers" (mousedown)="$event.preventDefault()" (click)="selectNumber(number.raw)">{{number.formatted}}</button>
这里是StackBlitz上的有效示例。