Try1：

Question

我的离子/角度应用程序页面中有一个signature pad和一个tinymce editor（ android ）。两者都很好。但我面临一个奇怪的问题。当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>

Try1：

此link表示 Canvas元素默认情况下无法调焦。因此，我尝试使用以下代码将焦点放在画布上：

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

但是，键盘仍然在那里，而tinymce编辑器正在关注着。

Try2：

然后我尝试使用以下代码重点关注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();
  }
}

这很有效。它关闭了键盘。但是，当键盘关闭时，它向下推动页面，当我的手指在画布上时，那里正在进行意外的绘图。

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

如何在签名板中将焦点放在画布上？

Try1：

Try2：

0 个答案: