IOS设备键盘在单击事件时未打开itext插入带有Angular 9的fabricjshammerjs

Posted 2023-05-09

【中文标题】IOS设备键盘在单击事件时未打开itext插入带有Angular 9的fabricjshammerjs

【英文标题】：IOS device keyboard not opening on single tap event itext insert fabricjs hammerjs with Angular 9

【发布时间】：2021-08-18 12:38:11

【问题描述】：

我将fabricjs 用于canvas，将hammerjs 用于Angular 9 的触摸事件。我有一个hammerjs 的单击事件，它创建了一个fabric 的IText 对象。单击可创建织物并将其填充到画布上，但设备键盘未打开以在文本对象中添加文本。 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。

请提出建议。 提前致谢

【参考方案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;
  
);

谢谢 :) 继续编码

【讨论】：

觉得有用请点赞