입력 태그와 함께 for 루프를 사용하고 있습니다. 사용자가 무언가를 입력하고 Enter 키를 누르면 명령이 제출되고 현재 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
}
참고 : 파이썬 셸을 만들려고합니다.
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
}
<input>태그 의 참조를 얻습니다.<td><tr><tr>동적으로 생성 될 다음을 참조합니다.<td><input>요소 를 가리키고 초점을 추가합니다.이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다