I am using fabricjs for canvas and hammerjs for touch event with Angular 9. I have a single tap event of hammerjs which creates an object of fabric's IText. Single tapping creates the fabric and populates it on the canvas, but the device keyboard does not open to add text in the text object. The fabricjs's IText creates TEXTAREA internally to allow text entering.
Tried with:
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();
Above solutions were tried with settimeout as well.
Please suggest. thanks in advance
Found a way by using VanilaJS touchend
event. Had to remove the HammerJS's doubletap
event and use touchend
event.
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;
}
});
thanks :) keep coding