如何在FabricJS的Textbox中的Backspace键按事件中添加逻辑?

时间:2017-11-21 17:15:56

标签: fabricjs

基本上我正在寻找的是如何将自己的逻辑添加到keyPress事件...我的意思是我需要在从Textbox元素中删除一些字符之前检查一下。 我设法添加" catch"事件,但现在没有任何内容从文本框中删除。

http://jsfiddle.net/redlive/n2x5k3Ld/



fabric.Textbox.prototype.onBackspacePressed = function(e) {
    console.log('____xxx', this, e);
    //e.stopImmediatePropagation(); 
    //e.preventDefault();
};

var canvas = new fabric.Canvas('paper');
canvas.setHeight(300);
canvas.setWidth(500);

var text = new fabric.Textbox('Hello beautiful world', {
  left: 50,
  top: 10,
  fontFamily: 'arial',
  fill: '#333',
  fontSize: 50
});

text.keysMap = fabric.util.object.clone(text.keysMap);
text.keysMap['8'] = 'onBackspacePressed';
            
canvas.add(text);
canvas.renderAll();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

我找到了一种控制Backspace的方法。

fabric.Textbox.prototype.onBackspacePressed = function(e) {
    if (1===1) { // Add your condition here
        this.removeChars(e);
    }
};

工作正常。