如何将Fabric.js中清除文本的默认点击事件改为删除键触发事件？

我来帮你搞定这个问题！原来的代码会在进入文本编辑模式时立刻清空内容，这显然不是你想要的效果。我们可以通过监听键盘按下事件，只在按下删除键（Backspace/Delete）且文本还是默认提示语时才清空，具体修改如下：

修改后的完整代码 #

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:keydown", function(e) {
  const targetText = e.target;
  // 仅处理i-text元素，且当前文本为默认提示文本
  if (targetText.type === "i-text" && targetText.text === "Tap and Type") {
    // 判断按下的是Backspace(键码8)或Delete(键码46)
    const isDeleteKey = e.keyCode === 8 || e.keyCode === 46;
    if (isDeleteKey) {
      targetText.text = "";
      canvas.renderAll();
      // 阻止默认删除行为，避免重复操作
      e.e.preventDefault();
    }
  }
});

canvas.add(oText);

关键修改说明 #

• 替换触发事件：移除了原来的text:editing:entered事件（这个事件会在点击文本进入编辑时立刻触发），改用text:keydown事件，确保只有键盘操作时才触发清空逻辑。
• 增加按键判断：只响应Backspace和Delete键，精准匹配你"仅按下删除键才清除"的需求。
• 保留默认文本校验：只有当文本仍然是初始的"Tap and Type"时才执行清空，避免用户输入内容后误删自己的文字。
• 阻止默认行为：调用e.e.preventDefault()避免Fabric.js在我们清空文本后再执行一次默认的删除操作，保证交互流畅。

内容的提问来源于stack exchange，提问作者hirazzz