提问者:小点点

如何在*NGFOR指令内的下一个<input>上设置焦点


我有一个表单,该表单根据用户想要输入的托盘数量捕获多个条形码。 这反过来又重复一组输入,每个输入捕获一个唯一的条形码。

barcodes.component.html

<div *ngFor="let i of components(number).fill(1), let x = index">
    <input class="form-control" type="text" 
        [(ngModel)]="barcode[x]" (keyup.enter)="keytab($event)"> 
</div>

barcodes.component.ts

keytab(e) {
    let element = e.srcElement.nextElementSibling; // get the sibling element
    
    if(element == null)  // check if its null
        return;
    else
        element.focus();   // focus if not null
}

默认情况下,扫描程序在扫描有效条形码后自动执行keyup.enter事件。

我希望焦点从刚刚扫描的输入转移到下一个可用的空兄弟。

如何将焦点设置为尚未填充的下一个可用输入同胞?


共1个答案

匿名用户

您可以执行以下更改,

(keyup.enter)="keytab($event.target)"


keytab(e) {
    let element = e.parentElement.parentElement.childNodes; // get the parent element
    
    for(let child of element){
       if(child.firstChild.type === "text" && child.firstChild.innerHTML === ""){
           child.firstChild.focus();
            return;
        }
    }