与Angular合作有关于autofocus
属性的问题。详细地说,我有一个<form>
,顶部有一个<input type="text">
,最初由一个条件聚焦。
<input [attr.autofocus]="selection===-1"
[(ngModel)]="myForm.firstInpElem"
name="firstInpElem"
placeholder="firstInpElem">
这是按预期工作(Chrome)。
然后表格连续选择由<input type="radio">
控制的两个选项。
一旦做出选择,将显示相应的元素,然后应该获得autofocus
。
但这没有发生,我不明白它的原因。
准备了一个stackblitz with a working example,但主要是下面的标记,将无法按预期工作
<h1>Forms example</h1>
<form>
<pre>Condition to focus "firstInpElem" is {{selection===1|json}}</pre>
<p>This input element is autofocussed on page load</p>
<p>
<input [attr.autofocus]="selection===-1"
[(ngModel)]="myForm.firstInpElem"
name="firstInpElem"
placeholder="firstInpElem">
</p>
<p>
Provide one of both information:<br>
<label>
<input [(ngModel)]="selection"
name="radioInpElem"
type="radio"
[value]="1">
Option 1
</label>
<br>
<label>
<input [(ngModel)]="selection"
name="radioInpElem"
type="radio"
[value]="2">
Option 2
</label>
</p>
<pre>Condition to focus "secondInpElem" is {{selection===1|json}}</pre>
<pre>Condition to focus "thirdInpElem" is {{selection===2|json}}</pre>
<p>
<input *ngIf="selection===1"
[attr.autofocus]="selection===1"
[(ngModel)]="myForm.secondInpElem"
name="secondInpElem"
placeholder="secondInpElem">
<input *ngIf="selection===2"
[attr.autofocus]="selection===2"
[(ngModel)]="myForm.thirdInpElem"
name="thirdInpElem"
placeholder="thirdInpElem">
</p>
</form>
<pre>{{myForm|json}}</pre>
如果您检查开发工具(F12工具),您将看到新的输入控件实际上获得了autofocus
属性,但它没有获得焦点。那是因为autofocus
将重点放在元素when the page loads上。在您的情况下,当新元素变得可见时,页面已经加载。
你可以做的是在新输入元素上以编程方式设置焦点。为此,您可以为具有ngIf
条件的两个输入元素定义公共模板引用变量:
<input #inputElement *ngIf="selection === 1"
[(ngModel)]="myForm.secondInpElem"
name="secondInpElem"
placeholder="secondInpElem">
<input #inputElement *ngIf="selection === 2"
[(ngModel)]="myForm.thirdInpElem"
name="thirdInpElem"
placeholder="thirdInpElem">
并使用ViewChildren
和QueryList.changes
事件监控这些元素的存在。每次输入元素之一变为可见时,您将焦点设置在它上面:
@ViewChildren("inputElement") inputElements: QueryList<ElementRef>;
ngAfterViewInit() {
this.inputElements.changes.subscribe(() => {
this.inputElements.last.nativeElement.focus();
});
}
有关演示,请参阅this stackblitz。
另一个选项是隐藏输入(不使用* ngIf else display.style)和引用变量请参阅https://stackblitz.com/edit/angular-sbc4pp?file=src%2Fapp%2Fapp.component.html
<label>
<input [ngModel]="selection" (change)="change(second,1)"
name="radioInpElem"
type="radio"
[value]="1">
Option 1
</label>
<br>
<label>
<input [ngModel]="selection" (change)="change(third,2)"
name="radioInpElem"
type="radio"
[value]="2">
Option 2
</label>
<input #second [style.display]="selection===1?'inherit':'none'"
[(ngModel)]="myForm.secondInpElem"
name="secondInpElem"
placeholder="secondInpElem">
<input #third [style.display]="selection===2?'inherit':'none'"
[(ngModel)]="myForm.thirdInpElem"
name="thirdInpElem"
placeholder="thirdInpElem">
你的功能改变了
change(element:any,index:number)
{
this.selection=index;
setTimeout(()=>{element.focus()},0);
}