Commit 4676b2be authored by limingzhe's avatar limingzhe

feat: 聚焦

parent af45e245
......@@ -46,11 +46,11 @@
</div>
</div>
<!-- 句子 -->
<div *ngIf="curSentenceData" style="position: absolute; top: 0; margin-top: 8vh; width: 90%; margin-left: 5%; text-align: left; font-size: 3.3vh; color:#fff; font-family: DroidSansFallback;">
<div #sentenceDiv *ngIf="curSentenceData" style="position: absolute; top: 0; margin-top: 8vh; width: 90%; margin-left: 5%; text-align: left; font-size: 3.3vh; color:#fff; font-family: DroidSansFallback;">
<label>
{{curSentenceData.textArr[0]}}
</label>
<input [(ngModel)]="curInputValue" (change)="inputChange($event)" style="background-color: #007b3e; border-radius: 1.5vh; border-width: 0; z-index: 5; text-align: center; width: 35vh" />
<input autofocus [(ngModel)]="curInputValue" (change)="inputChange($event)" style="background-color: #007b3e; border-radius: 1.5vh; border-width: 0; z-index: 5; text-align: center; width: 35vh" />
<label>
{{curSentenceData.textArr[1]}}
</label>
......
......@@ -48,6 +48,12 @@ export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('wrap', { static: true }) wrap: ElementRef;
@ViewChild('iframeContent', {static: true }) iframeContent: ElementRef;
@ViewChild('input', {static: true }) input: ElementRef;
@ViewChild('sentenceDiv') set content(content: ElementRef) {
if (content) {
this.initSentenceDiv(content);
}
}
canvasScale = 2;
......@@ -505,6 +511,8 @@ export class PlayComponent implements OnInit, OnDestroy {
try {
this.playSentenceAudio();
this.focusInput();
} catch (error) {
console.log(error);
......@@ -585,7 +593,15 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
autofocus = false;
inputContent;
initSentenceDiv(content) {
console.log('content: ', content);
const sDiv = content.nativeElement;
sDiv.children[1].focus();
this.inputContent = content;
// this.autofocus = true;
}
......@@ -604,6 +620,14 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.initResultView();
}
focusInput() {
if (this.inputContent) {
setTimeout(() => {
this.initSentenceDiv(this.inputContent);
}, 200);
}
}
setCurSentenceData() {
this.curSentenceData = this.sentenceArr[this.curPage - 1];
}
......@@ -774,6 +798,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.setCurSentenceData();
this.playSentenceAudio();
this.focusInput();
}
cleanAudio() {
......@@ -908,6 +937,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initBtn();
// this.initSentence();
......@@ -2588,9 +2618,13 @@ export class PlayComponent implements OnInit, OnDestroy {
renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init();
// if (this.inputContent) {
// this.initSentenceDiv(this.inputContent);
// }
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment