我有一个表单,该表单根据用户想要输入的托盘数量捕获多个条形码。 这反过来又重复一组输入,每个输入捕获一个唯一的条形码。
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事件。
我希望焦点从刚刚扫描的输入转移到下一个可用的空兄弟。
如何将焦点设置为尚未填充的下一个可用输入同胞?
您可以执行以下更改,
(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;
}
}