Commit 4676b2be authored by limingzhe's avatar limingzhe

feat: 聚焦

parent af45e245
...@@ -46,11 +46,11 @@ ...@@ -46,11 +46,11 @@
</div> </div>
</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> <label>
{{curSentenceData.textArr[0]}} {{curSentenceData.textArr[0]}}
</label> </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> <label>
{{curSentenceData.textArr[1]}} {{curSentenceData.textArr[1]}}
</label> </label>
......
...@@ -48,6 +48,12 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -48,6 +48,12 @@ export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('wrap', { static: true }) wrap: ElementRef; @ViewChild('wrap', { static: true }) wrap: ElementRef;
@ViewChild('iframeContent', {static: true }) iframeContent: ElementRef; @ViewChild('iframeContent', {static: true }) iframeContent: ElementRef;
@ViewChild('input', {static: true }) input: ElementRef; @ViewChild('input', {static: true }) input: ElementRef;
@ViewChild('sentenceDiv') set content(content: ElementRef) {
if (content) {
this.initSentenceDiv(content);
}
}
canvasScale = 2; canvasScale = 2;
...@@ -505,6 +511,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -505,6 +511,8 @@ export class PlayComponent implements OnInit, OnDestroy {
try { try {
this.playSentenceAudio(); this.playSentenceAudio();
this.focusInput();
} catch (error) { } catch (error) {
console.log(error); console.log(error);
...@@ -585,7 +593,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -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 { ...@@ -604,6 +620,14 @@ export class PlayComponent implements OnInit, OnDestroy {
// this.initResultView(); // this.initResultView();
} }
focusInput() {
if (this.inputContent) {
setTimeout(() => {
this.initSentenceDiv(this.inputContent);
}, 200);
}
}
setCurSentenceData() { setCurSentenceData() {
this.curSentenceData = this.sentenceArr[this.curPage - 1]; this.curSentenceData = this.sentenceArr[this.curPage - 1];
} }
...@@ -774,6 +798,11 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -774,6 +798,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.setCurSentenceData(); this.setCurSentenceData();
this.playSentenceAudio(); this.playSentenceAudio();
this.focusInput();
} }
cleanAudio() { cleanAudio() {
...@@ -908,6 +937,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -908,6 +937,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initBtn(); this.initBtn();
// this.initSentence(); // this.initSentence();
...@@ -2588,9 +2618,13 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -2588,9 +2618,13 @@ export class PlayComponent implements OnInit, OnDestroy {
renderAfterResize() { renderAfterResize() {
this.canvasWidth = this.wrap.nativeElement.clientWidth; this.canvasWidth = this.wrap.nativeElement.clientWidth;
this.canvasHeight = this.wrap.nativeElement.clientHeight; this.canvasHeight = this.wrap.nativeElement.clientHeight;
this.init(); 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