fabric.js的textbox无法绑定keydown吗
时间: 2023-11-27 18:53:59 浏览: 106
C# TextBox数据绑定的方法
可以使用`fabric.util.addListener`方法监听`keydown`事件,然后在事件处理程序中修改`textbox`的文本。以下是示例代码:
```javascript
var canvas = new fabric.Canvas('canvas');
var textbox = new fabric.Textbox('Type here', {
left: 50,
top: 50,
width: 150,
fontSize: 20,
fill: 'black'
});
canvas.add(textbox);
fabric.util.addListener(document, 'keydown', function(e) {
if (textbox === canvas.getActiveObject() && e.keyCode === 8) {
// 如果当前选中的对象是textbox,且按下的是退格键
var text = textbox.text.slice(0, -1); // 获取textbox的文本并去掉最后一个字符
textbox.set('text', text); // 修改textbox的文本
canvas.renderAll(); // 重新渲染画布
}
});
```
在上面的示例中,我们监听了整个文档的`keydown`事件,并在事件处理程序中判断当前选中的对象是否为`textbox`以及按下的是否是退格键。如果满足条件,就获取`textbox`的文本并去掉最后一个字符,然后使用`set`方法修改`textbox`的文本,并调用`renderAll`方法重新渲染画布。
阅读全文