CODEWITHSUNDEEP
fabricjs
Ayan Misra
Ayan Misra

Reputation: 93

fabricjs move cursor at the end of textbox programmatically

I have a textbox in which I put text content at the time of adding it over canvas and want to make it active. so that user can start writing after the default text added. I have added enterEditing() which active textbox but move cursor at the beginning.

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

Upvotes: 2

Views: 2353

Answers (1)

Durga
Durga

Reputation: 15604

Use setSelectionStart(length) and setSelectionEnd(length); to set the cursor upto the end of the text.

DEMO 

var canvas = new fabric.Canvas('c');
var newText = new fabric.Textbox('Type \n here...', {
  fontSize: 27,
  top: 10,
  left: 10,
  width: 200
});
canvas.add(newText);
canvas.setActiveObject(newText);
newText.enterEditing();
newText.setSelectionStart(newText.text.length);
newText.setSelectionEnd(newText.text.length);
canvas{
 border: 2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c" width=300 height=300></canvas>

Upvotes: 7

Related Questions