Как я могу изменить свое событие нажатия по умолчанию в clearText на событие нажатия клавиши в fabri c. js?

Question

Я следую приведенной ниже js скрипке. Я отлично управляю этим. https://jsfiddle.net/Jonah/sbtoukan/1/ Но в приведенной выше ссылке текст очищается при нажатии на текст. Я хочу очистить текст только когда я нажимаю клавишу удаления. Я пробовал несколько способов. Но ничего не работает для меня. Ниже приведен точный код, который позволяет мне очистить текст только после нажатия на текст.

var canvas = new fabric.Canvas('container');
var oText = new fabric.IText('Tap and Type', {
left: 0,
top: 0,
fontFamily: 'Bree Serif',
fontSize: 22,
cache: false
});
canvas.on("text:editing:entered", clearText);
function clearText(e) {
if (e.target.type === "i-text") {
if (e.target.text === "Tap and Type") {
  e.target.text = "";
  canvas.renderAll();
};
}
}
canvas.add(oText);

Answer 1

Вам необходимо добавить обработчик событий для ключа удаления. Если нажать клавишу удаления, будет очищен только текст.

Вы можете использовать приведенный ниже фрагмент кода. Надеюсь, это поможет!

var canvas = new fabric.Canvas('container');

var oText = new fabric.IText('Tap and Type', {
  left: 0,
  top: 0,
  fontFamily: 'Bree Serif',
  fontSize: 22,
  cache: false
});

canvas.on("text:editing:entered", clearText);

function clearText(e) {
  if (e.target.type === "i-text") {
    if (e.target.text === "Tap and Type") {
    document.addEventListener("keypress", function(event) {
        if (event.keyCode == 46) {
           e.target.text = "";
        }
     })
      
      canvas.renderAll();
    };
  }
}

canvas.add(oText);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"></script>

<canvas id="container" width="780" height="500"></canvas>