Fabric.js如何编程将文本框光标移至末尾？解决激活后光标在开头问题

我之前在使用Fabric.js处理文本框时也遇到过一模一样的问题——设置默认文本后调用enterEditing()，光标总是跳到开头，没法直接在默认内容后面继续输入。这里有两种可靠的解决方法，你可以根据自己的Fabric.js版本来选：

方法一：直接操作编辑状态下的文本框元素 #

当调用enterEditing()后，Fabric.js会在页面上创建一个隐藏的textarea用于编辑。我们可以获取这个textarea，然后手动设置光标位置到文本末尾：

var object = canvas.getActiveObject('textbox');
canvas.setActiveObject(object);
object.setText("Start");
object.enterEditing();

// 获取编辑用的textarea元素
var textarea = object._textArea;
// 设置光标到文本末尾
textarea.selectionStart = textarea.selectionEnd = textarea.value.length;

这个方法的核心是利用原生DOM的selectionStart和selectionEnd属性，把光标定位到文本长度的位置，也就是末尾。

方法二：使用Fabric.js内置的API（适用于较新版本） #

如果你使用的是Fabric.js 2.x及以上的版本，可以直接调用文本框的setSelectionRange方法，不需要手动操作DOM元素，更优雅：

var object = canvas.getActiveObject('textbox');
canvas.setActiveObject(object);
object.setText("Start");
object.enterEditing();

// 直接设置选中范围（起始和结束位置相同就是光标位置）
object.setSelectionRange(object.text.length, object.text.length);

这个方法利用Fabric.js封装好的API，直接对文本框的选中区域进行设置，把起始和结束位置都设为文本的长度，就能让光标停在末尾。

小提示 #

如果调用enterEditing()后立即设置光标没生效，可能是因为DOM元素还没完全初始化，这种情况下可以加个短暂的延迟：

object.enterEditing();
setTimeout(() => {
  // 这里放光标定位的代码
  var textarea = object._textArea;
  textarea.selectionStart = textarea.selectionEnd = textarea.value.length;
}, 10);

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