Fabric.js iText：如何在不允许文本修改的情况下在 iText 上进行文本选择？答案

【问题标题】：Fabric.js iText : How to do text selection on iText while not allowing text modification?Fabric.js iText：如何在不允许文本修改的情况下在 iText 上进行文本选择？
【发布时间】：2018-07-03 05:48:37
【问题描述】：

我一直在阅读文档和论坛来解决这个问题，但找不到答案。

    var t1 = canvas.t1 =  _t1 = new fabric.IText(text1, {
      left: 100,
      top: 50,
    editable: true,
    selectable: false,
         width: 300,
     height: 150,
      fontFamily: 'Helvetica',
    fontSize: 20,
      fill: '#f4b642',

} );

var t2 = canvas.t2 =  _t1 = new fabric.IText(text2, {
      left: 200,
      top: 150,
    editable: false,
    selectable: true,
    width: 300,
     height: 150,
      fontFamily: 'Helvetica',
    fontSize: 20,
      fill: '#333',

} );

canvas.add(t1,t2);
t1.enterEditing();

https://jsfiddle.net/qgeryu9o/2/

如小提琴上面的 iText 元素所示，我想在页面加载时直接访问文本，这只是为了选择一些单词或句子。

使用 itext.enterEditing()，就像在上面的 itext 框中一样，这可以正常工作，除了它还允许我不想要的：删除、添加或修改文本。

在将 itext.editable 设置为 false 时（如小提琴较低的 iText 元素）文本无法修改，但无法显示选择。

我尝试按照此线程的建议在容器 div 上捕获 keydown 事件。 fabric.js canvas listen for keyboard events?

但它对我不起作用（在 Chrome、Firefox 上试过），在编辑模式下不会在 itext 上触发该事件。

感谢您的帮助。

迈克

【问题讨论】：

您只想选择文本？
是的，Durga，想法是将一些声音与单词联系起来，例如，

标签： javascript fabricjs

【解决方案1】：

由于我找不到允许选择但不能编辑的 Fabric.js 参数，因此我使用了解决方法。

起初我想删除隐藏文本区域上设置的侦听器。但是，由于使用了 bind()，因此无法删除这些侦听器无需修改 fabric.js ：

fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this));

所以，我只是覆盖了 onInput() 和 onKeydown 方法。

t1.onInput = function() {
    console.log("no input on t1") ;
    return false } ;

t1.onKeyDown = function() {
    console.log("no onKeyDown on t1") ;
    return false } ;

它工作正常，如更正的小提琴所示： https://jsfiddle.net/qgeryu9o/4/

如果有更直接的方法可以获得相同的结果（选择但没有版本），我会很高兴听到它。

谢谢

【讨论】：