Move cursor to the last input

Question

I have a textarea in which the user can type text. The user can also push a button to add stuff like images and links. This button namely prompts them for their link, and then inputs the correct html in the textarea where the cursor was located. A working code example is this:

jQuery('input#btn').click(function(e) {
    var link = prompt("Please paste the link", "http://");
    jQuery('textarea#id1').insertAtCaret('<a href="'+link+'">link text</a>');
});

The .insertAtCaret() function is the one kindly created by Daniel Beck for another question of mine. It finds the position of the cursor in the textarea, so that the html-chunk can be added here.

But after jQuery has added this html-chunk, the cursor is no longer in the textarea, but focus is now on the button that was pushed. I would like the cursor to remain where is was before pushing this button (after the added html-chunk).

Is it possible to find the last inputted text in a textarea and is it then possible to move the curser there?

Note, this input could be anywhere in the already written text in the textarea.

What about you set an attribute to the element that already given blur method. Then you can search the element by the attribute — Luki Centuri, Aug 12 '17 at 17:47
I can, off the top of my head, think of at least two different approaches here. First one would be to focus the same element, but move the focus point X number of characters, based on the length of whatever is inserted. This would need to be done in the actual function currently inserting the content in the textarea. You could also try to search for whatever text you input and set the focus after the last character of that content - basically read in the content of the textarea, search for a match for what you just input, and go from there. — junkfoodjunkie, Aug 12 '17 at 17:50

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

At first you have to put back the focus to your text area.

var te = document.getElementById('id1');
te.focus();

And second set the cursor to specific position.

var mySavedPosition = 3 // or whatever it was before
te.selectionStart = mySavedPosition;
te.selectionEnd = mySavedPosition;

Thats it.

So at your example it could look like here:

jQuery('input#btn').click(function(e) {
    var link = prompt("Please paste the link", "http://");
    var te = document.getElementById('id1');
    var pos = te.selectionStart;
    jQuery('textarea#id1').insertAtCaret('<a href="'+link+'">link text</a>');
    te.selectionStart = pos;
    te.selectionEnd = pos;
});

And sorry, but I'm not a friend of jQuery, so I use just native JS.

Update

I have overlooked that you want the cursor at the end of the inserted place. Since I do not know the length of the inserted text, I best get the position from the end.

jQuery('input#btn').click(function(e) {
    var link = prompt("Please paste the link", "http://");
    var te = document.getElementById('id1');
    var pos = te.textLength - te.selectionStart;
    jQuery('textarea#id1').insertAtCaret('<a href="'+link+'">link text</a>');
    te.selectionStart = te.textLength - pos;
    te.selectionEnd = te.textLength - pos;
});

Move cursor to the last input

1 Answers1

Update