2

我的离子/角度应用程序（android）的页面中有一个签名板和一个tinymce 编辑器。两者都工作正常。但我面临一个奇怪的问题。当 tinymce 编辑器处于焦点时，键盘会显示。现在，如果我单击画布，键盘仍处于打开状态，tinymce 编辑器仍处于焦点位置。

我的html代码：

  <ion-row class="signature-pad-input">
    <signature-pad [options]="signaturePadOptions" (onBeginEvent)="drawStart()"
                   (onEndEvent)="drawComplete()">
    </signature-pad>
  </ion-row>
  <ion-row class="note-editor" id="noteAreaTinyMce">
    <app-tinymce class="note-input-textarea" [(ngModel)]='noteText'></app-tinymce>
  </ion-row>

尝试1：

此链接指出Canvas 元素默认情况下不可聚焦。因此，我尝试使用以下代码将焦点放在画布上：

let canvas= <HTMLElement> document.querySelector('signature-pad>canvas');
canvas.focus();

但是，键盘还在，tinymce 编辑器保持焦点。

尝试2：

然后，我尝试使用以下代码使 tinymce 编辑器失焦，而不是将焦点放在签名板的画布上：

import {Renderer2} from '@angular/core';
export class AddProgressNotePage {

constructor(private renderer: Renderer2){}

  drawStart() {
    // Making tinymce editor blur
    this.renderer.selectRootElement('.note-input-textarea>iframe').blur();
  }
}

这行得通。它关闭键盘。但是，当键盘关闭时，它向下推动了页面，当我的手指在画布上时，那里正在完成意想不到的绘图。

有没有其他方法可以让画布聚焦？

4

0 回答 0