javascript - Angular 将输入光标设置为下一个输入，PS : next input tag will be dynamically added on keyEnter of previous input click

Question

我正在使用带有输入标签的 for 循环。用户输入一些东西，然后按回车键，命令被提交，当前的 for 循环被另一个输入标签推送。我希望将光标移动到下一个输入。有很多解决方案可以获取 srcElement 并将焦点移动到下一个元素，但这里下一个元素是动态添加的。

shell.component.html

<div class="shell">
    <table>
        <tr *ngFor="let text of shellText">
            <ng-container *ngIf="getType(text['type']);else input">
                <td style="width: 2%">{{text['preText']}}</td>
                <td>{{text['text']}}</td>
            </ng-container>
            <ng-template #input>
                <td style="width: 2%">{{text['preText']}}</td>
                <td><input [readonly]="text['type'] == 'command'" class="shell-input"
                        (keyup.enter)="onEnter($event,text['line'])" [(ngModel)]="text['text']" mat-input type="text" /></td>
            </ng-template>
        </tr>
    </table>
</div>

---

shell.component.ts

  onEnter(event, line) {
    if (this.shellText[line - 1].text.trim().endsWith(':')) {
      this.shellText.push({ 'type': CLASSES['CONTINUE_COMMAND'], 'line': line + 1, 'preText': '', 'text': '    ' },)
    } else {
      this.shellText.push({ 'type': CLASSES['CURRENT_COMMAND'], 'line': line + 1, 'preText': '>>>', 'text': '' },)
    }
    this.shellText[line - 1]['type'] = CLASSES['COMMAND']

    setTimeout(() => {
      this.setFocus(event)
    }, 2000);
  }


  setFocus(event) {
    debugger
    let element = event.srcElement.nextElementSibling; // get the sibling element
    console.log(element)
    if (element == null)  // check if its null
      return;
    else
      element.focus();   // focus if not null
  }

注意:我正在尝试创建一个 python shell

Answer 1

shell.component.ts

  setFocusevent) {
    let element = event.srcElement.parentElement.parentElement.nextElementSibling.lastElementChild.firstElementChild; // get the sibling element
    if (element == null)  // check if its null
      return;
    else
      element.focus();   // focus if not null
  }

1. 您首先获得 <input> 的引用标签
2. 然后你得到它的父元素<td>
3. 然后你再往上看 <tr>
4. 那你引用下<tr>这将是动态创建的
5. 然后您访问最后一个元素，这将是最后一个 <td>
6. 然后你指向你想要的<input>元素并添加焦点