IOS 设备键盘在单击事件 itext 上未打开，插入 fabricjs hammerjs 与 Angular 9

Question

我将 fabricjs 用于 canvas，将 hammerjs 用于触摸事件 Angular 9. 我有一个 hammerjs 的单击事件，它创建了 fabric 的 IText 对象。单击创建结构并将其填充到 canvas 上，但设备键盘不会打开以在文本对象中添加文本。 fabricjs 的 IText 在内部创建 TEXTAREA 以允许文本输入。

尝试过：

1. canvas.getActiveObject().enterEditing(); 
   canvas.getActiveObject().hiddenTextarea.focus();
2. document.querySelector('[data-fabric-hiddentextarea]').setAttribute("autofocus", "");
   document.querySelector('[data-fabric-hiddentextarea]').focus();
   document.querySelector('[data-fabric-hiddentextarea]').click();

以上解决方案也已尝试使用 settimeout。

求推荐。提前致谢

Answer 1

找到了使用VanilaJS touchend事件的方法。必须删除 HammerJS 的 doubletap 事件并使用 touchend 事件。

let element = document.getElementById('canvasId');
let timedout;
let lastTaped = 0;
element.addEventListener('touchend', (event) => {
    var currentTime = new Date().getTime();
    var tapLength = currentTime - lastTaped;
    clearTimeout(timedout);
    if (tapLength < 500 && tapLength > 0) {
      // code to add the iText object
      event.preventDefault();
    }
    lastTaped = currentTime;
  }
});

谢谢 :) 继续编码

IOS 设备键盘在单击事件 itext 上未打开，插入 fabricjs hammerjs 与 Angular 9

IOS device keyboard not opening on single tap event itext insert fabricjs hammerjs with Angular 9

touch-event

ios

fabricjs

hammer.js

fabricjs2